Question

我有select我在页面上生成新的ng-model元素。它工作正常，它们与所有选项一起创建。问题是它们最终具有相同的select，因此如果页面上有多个<div ng-repeat="item in items"> <div ng-if="item.type === 'select'"> <select ng-init="data.selectedItem = data.selectedItem || item.subItems[0]" class="form-control" ng-model="data.selectedItem" ng-change="selectedItemChanged()" ng-options="subItem as subItem.name for subItem in item.subItems"> </select> </div> </div>，则只有第一个获得默认选择的值并且更改所选项目会导致选定的另一个中的项目选择取消选择。

基本上，我有以下代码来生成它们：

scope.items = [
    {
        id: 1,
        type: 'select',
        subItems: [{
            ID: 1,
            name: 'sub item 1'
        }, {
            ID: 2,
            name: 'sub item 2'
        }, {
            ID: 3,
            name: 'sub item 3'
        }]
    },
    {
        id: 2,
        type: 'select',
        subItems: [{
            ID: 4,
            name: 'sub item 4'
        }, {
            ID: 5,
            name: 'sub item 5'
        }, {
            ID: 6,
            name: 'sub item 6'
        }]
    },
    ];

数据如下所示：

<div ng-repeat="item in items">
    <div ng-if="item.type === 'select'">
        <div class="col-xs-4 col-sm-4 col-md-2">
            <select ng-init="data[data.selectedItem + item.id] = data[data.selectedItem + item.id] || data[item.subItems[0] + item.id]"
                    class="form-control"
                    ng-model="data[data.selectedItem + item.id]"
                    ng-change="selectedItemChanged(data[data.selectedItem + item.id])" 
                    ng-options="subItem as subItem.name for subItem in item.subItems">
            </select>
        </div>
    </div>
</div>

我尝试了以下为每个选择分配不同（动态）模型的方法：

params

但现在的问题是，当页面第一次加载时，它不会在select中设置默认项目。

Answer 1

使用两种不同模型的第二种方法是正确的。

如果下拉菜单的item.subItems[0].name不存在，请将selectedItem绑定为默认值。
同样在ng-options中，subItem.name应该是值，而不是整个对象的subItem。

ng-options="subItem.name as subItem.name for subItem in item.subItems"

＆＃13;

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { 
  
  $scope.items = [
    {
        id: 1,
        type: 'select',
        subItems: [{
            ID: 1,
            name: 'sub item 1'
        }, {
            ID: 2,
            name: 'sub item 2'
        }, {
            ID: 3,
            name: 'sub item 3'
        }]
    },
    {
        id: 2,
        type: 'select',
        subItems: [{
            ID: 4,
            name: 'sub item 4'
        }, {
            ID: 5,
            name: 'sub item 5'
        }, {
            ID: 6,
            name: 'sub item 6'
        }]
    },
    ];
 
    $scope.data = {selectedItem1 : '', selectedItem2 : ''};
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="item in items">
    <div ng-if="item.type === 'select'">
        <select ng-init="data['selectedItem' + item.id] = data['selectedItem' + item.id] || item.subItems[0].name"
                class="form-control"
                ng-model="data['selectedItem' + item.id]"
                ng-change="selectedItemChanged()" 
                ng-options="subItem.name as subItem.name for subItem in item.subItems">
        </select>
    </div>
</div>
  {{data | json}}
  </div>
</body>

＆＃13;

Answer 2

.... changing the selected item is causing the selected items in the other select to be unselected

这里面临的是角度范围内的污染

您可以选择制作自定义指令，并使用scope:{}将范围设置为隔离范围如果你使用bindToController语法，那么它将是：

scope:{},
bindToController:{}

angular.directive（'selectBox'，selectBox）;

function selectBox(){
  return {
   restrict: 'E',
   scope: {},
   template: `
   //whatever ur html code + ng-model + other ng- directives goes here.
       `, 
//notice its backticks, backticks allow multiline strings in es6 and 
//is supported in most browsers.
   //anyother properties like replace/transclude+ng-transclude, etc.
  } //return ends
} //selectBox ends

HTML中的

：

<select-box></select-box>
<select-box></select-box>
<select-box></select-box>

现在，如果你改变任何东西，其他选择下拉列表将不会受到影响，因为每个选择下拉列表都有自己的范围。

PS：在你的控制中有如此多的ng-directives，所有这些都将引发摘要周期，随着你的页面增长，它会变慢。尽可能“去抖”。

如何使用不同的模型动态生成选择元素？

2 个答案: