当前位置: 首页 > 面试题库 >

AngularJS ng-options不呈现值

李意致
2023-03-14
问题内容

如何呈现以下选项列表的值?

$scope.limits = [ {value:  '5', text: 'Afficher 5 par page'},
                  {value: '10', text: 'Afficher 10 par page'},
                  {value: '15', text: 'Afficher 15 par page'},
                  {value: '20', text: 'Afficher 20 par page'}
                ];

<select id="limitType" name="limit" ng-model="limit" ng-options="limit.value as limit.text for limit in limits"></select> enregistrement par page

预期结果(预期为value =“ limit.value”:

<select ng-options="option.value as option.text for option in limits" ng-model="limit" id="limitType" class="ng-pristine ng-valid">
    <option value="5" selected="selected">Afficher 5 par page</option>
    <option value="10">Afficher 10 par page</option>
    <option value="15">Afficher 15 par page</option>
    <option value="20">Afficher 20 par page</option>
</select>

结果:

<select ng-options="option.value as option.text for option in limits" ng-model="limit" id="limitType" class="ng-pristine ng-valid">
    <option value="0" selected="selected">Afficher 5 par page</option>
    <option value="1">Afficher 10 par page</option>
    <option value="2">Afficher 15 par page</option>
    <option value="3">Afficher 20 par page</option>
</select>

问题答案:

ng-options指令value<options>元素上设置属性。它始终使用序列。

使用limit.value as limit.text for limit in limits方式:

  • <option>的标签设置为limit.text
  • limit.value值保存到选择的ng-model

检查此小提琴:http :
//jsfiddle.net/bmleite/k58Hw/



 类似资料:
  • 我有一个版本为2.2.4的Grails应用程序。我试图将一个gsp呈现为一个字符串参数,并将其发送到Mandrill模板以作为邮件发送。代码如下 普惠制如下 当我在本地测试时,它按预期工作。但当我在开发环境中测试这个时,“view”参数总是空的。 这有什么具体原因吗?这个问题让我困惑,因为我想不出这个问题的逻辑原因,因为它在我的本地机器上工作。此外,当它在开发环境中执行时,它不会抛出任何错误消息,

  • 如何呈现以下选项列表的值? 预期结果(预期值="limit.value": 结果:

  • 我的表格代码: 我的视图代码: 堆栈跟踪: 环境: 请求方法:获取请求URL: Django版本:1.4 Python版本:2.7。2个已安装的应用程序:('django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.sites','django.contrib.messa

  • 我正在使用react、Redux和react Router开发一个react web应用程序,带有服务器端呈现(使用express) 我面临的问题有点难以解释。我将试着在下面的步骤中进行解释。 > 您首先从http://www.example.com/articles/1234这样的URL进入应用程序。express服务器将发送正确的内容,其中包括正确的页面源和DOM(来自chrome Eleme

  • 我正在使用飞碟库生成pdf。但是我对一些html实体有问题。 我已经在搜索解决方案了,我在这个论坛和其他地方找到了很多提示,但仍然存在问题。 我尝试过这种方法: http://sdtidbits.blogspot.com/2008/11/flying-saucer-xhtml-rendering-and-local.html 但没有任何成功 我的代码如下所示: 其中pdf是要创建的新pdf的名称,