如何動態生成具有不同模型的選擇元素？

我有一個ng-repeat我在頁面上生成新的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>

但現在的問題是，它沒有設置默認項目第一次加載頁面時的選擇。

來源

2017-05-19 Apostrofix

您使用兩種不同模型的第二種方法是正確的。

綁定如果selectedItem的下拉列表不存在item.subItems[0].name爲默認值。
另外在ng-options,subItem.name應該是值而不是subItem這是整個對象。

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

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 : ''}; 
 
});

<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>

來源

2017-05-19 12:31:15 Sajal

謝謝你，這工作得很好！我只是最終在'ng-options'中使用了整個'subItem'對象，因爲這樣模型就擁有了整個對象而不僅僅是名稱。 – Apostrofix

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

什麼烏爾面臨這裏是角

範圍污染

ü可以選擇做一個自定義的指令，並設置如果烏拉圭回合使用bindToController語法使用scope:{} 範圍爲孤立的範圍，那麼這將是：

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指令，它們都會啓動摘要循環，隨着ur頁面的增長，它會變慢。儘可能「去抖」。

來源

2017-05-19 12:10:40 Plankton

如何動態生成具有不同模型的選擇元素？

回答

相關問題