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

设置ng-options绑定选择元素的选定值

洪宏硕
2023-03-14
问题内容

摆弄相关代码:http :
//jsfiddle.net/gFCzV/7/

我试图设置绑定到ng-repeat中引用的对象的子级集合的下拉列表的选定值。我不知道如何设置选定的选项,因为我无法以任何我知道的方式引用它所绑定的集合。

HTML

<div ng-app="myApp" ng-controller="SomeController">
    <div ng-repeat="Person in People">
        <div class="listheader">{{Person.firstName}} {{Person.lastName}}</div>
        <div class="listitem" ng-repeat="Choice in Person.Choices">
            {{Choice.Name}}: 
            <select 
                ng-model="Choice.SelectedOption"                 
                ng-options="choice.Name for choice in Choice.Options"></select>
            {{Choice.SelectedOption.ID}}
        </div>
    </div>
</div>

JS

var myApp = angular.module('myApp', []);
myApp.controller("SomeController", function($scope) {
    $scope.People = [{
        "firstName": "John",
        "lastName": "Doe",
        "Choices": [
            {
                "Name":"Dinner",
                "Options":[{Name:"Fish",ID:1}, {Name:"Chicken",ID:2}, {Name:"Beef",ID:3}],
                "SelectedOption":{Name:"Chicken",ID:2} //this doesn't work
            },
            {
                "Name":"Lunch",
                "Options":[{Name:"Macaroni",ID:1}, {Name:"PB&J",ID:2}, {Name:"Fish",ID:3}],
                "SelectedOption":""
            }
        ],        
    }, {
        "firstName": "Jane",
        "lastName": "Doe"
    }];
});

这是我实际上应该在模型上将ng-init与SelectedIndex一起使用的一种情况吗?


问题答案:

如果使用AngularJS 1.2,则可以使用“ track by”来告诉Angular如何比较对象。

<select 
    ng-model="Choice.SelectedOption"                 
    ng-options="choice.Name for choice in Choice.Options track by choice.ID">
</select>

更新小提琴http://jsfiddle.net/gFCzV/34/



 类似资料:
  • 本文向大家介绍aurelia 绑定到选择元素,包括了aurelia 绑定到选择元素的使用技巧和注意事项,需要的朋友参考一下 示例 字符串数组 在选择下拉列表中选择一个值并提供字符串数组时,所选值将作为字符串绑定到选择元素的value属性,我们可以使用字符串插值显示该字符串。 对象数组 与上面的示例不同,当提供对象数组时,在下拉列表中选择一个值时,绑定到该特定选项的模型就是所提供的对象。      

  • 问题内容: 我希望解决三个问题… 在我的应用程序页面中,我有一个选择州,另一个选择县。对于州,我有: 数据: 对于我的县,请选择: 数据: 这是我的: 因此,如您所见,我在州选择上使用,在县选择上使用,在县数据集中已设置了相应的州ID 。 我想做几件事: 隐藏选择的县,直到选择了一个州。 选择州后,按选定的/ 过滤县选择选项 筛选由第一,然后由。 我还没有看到一个方法来设置到或过滤器由一个数字,而

  • 问题内容: 我想将select元素绑定到对象列表-这很容易: 在这种情况下,似乎是一个数字-所选项目的ID。 但是,我实际上想绑定到country对象本身,所以它是对象,而不仅仅是id。我试图像这样更改选项的值: 但这似乎不起作用。它似乎在我的对象中放置了一个对象,但是没有放置我期望的对象。您可以在我的Plunker示例中看到这一点。 我还尝试绑定到change事件,以便可以根据所选的id自己设置

  • 选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍。 如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.selectAll():是选择指定元素的全部 这两个函数返回的结果称为选择集。 例如,选择集的常见用法如下。 var body = d3.select("body"); //选择文档中的body元素 var p1

  • 问题内容: 我在这里看到了Angular select指令的文档:http : //docs.angularjs.org/api/ng.directive :select 。我不知道如何设置默认值。这令人困惑: 选择作为数组中值的标签 这是对象: HTML(工作): 然后我尝试在select元素内添加ng-option属性以设置为默认选项(不起作用)。 我究竟做错了什么? 问题答案: 因此,假设该

  • 问题内容: 我在项目中使用angularjs,在其中使用ng-options生成。 最初,当页面重新加载且未选择option元素时,生成的html如下所示: 但是当我选择一个元素(例如项目2)时,第一个空白选择就消失了。我知道它的发生是因为ng- model是由select值设置的。但我想先选择始终为空白,以便用户可以重置过滤器。 提前致谢。 问题答案: 这将为您完成工作: