嵌套NG-重複與包含數組

我不能嵌套ng-repeat爲數據結構類似於下面的工作對象的數組：嵌套NG-重複與包含數組

options = [{name:"opt1", data:["a","b","c"]}, {name:"op2", data:["d","e","f"]}]

我試圖做到的是創造一個選擇爲每個條目添加選項。

我認爲，這樣的事情應該工作：

<label ng-repeat="option in options"> 
    <div>{{option.name}}</div> 
    <select> 
    <option ng-repreat="val in option.data">{{val}}</option> 
    </select> 
</label>

但只有名字是名字被正確打印，只創建一個與它沒有任何價值的選擇。

然後我試圖在內部使用ng-repeattrack by $index：

<label ng-repeat="option in options"> 
    <div>{{option.name}}</div> 
    <select> 
    <option ng-repreat="val in option.data track by $index"> 
     {{option.data[$index]}} 
    </option> 
    </select> 
</label>

但$index似乎是外$index和0只計數到1與給定的數據。

我在做什麼錯？

來源

2014-12-25 Tobson

有一個錯字'NG-repreat'應該是'NG-repeat' – Chandermani

您應該使用[**'選擇的NG-option' **] （https://docs.angularjs.org/api/ng/directive/select）。 – ryeballar

@Chandermani尷尬^^現在它工作:)謝謝！ – Tobson

你應該用ng-options代替ng-repeat，並且在ng-model的幫助下你可以得到選定的值。這裏是一個工作的代碼

angular.module("module", []).controller('mainCtr', ['$scope', function($scope){ 
 
    $scope.options = [{name:"opt1", data:["a","b","c"]}, {name:"op2", data:["d","e","f"]}]; 
 
}]);

<!DOCTYPE html> 
 
<html ng-app="module"> 
 

 
    <head> 
 
     <link rel="stylesheet" href="style.css" /> 
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"> </script> 
 
     <script type="text/javascript" src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="mainCtr"> 
 
     <div ng-repeat="option in options"> 
 
      <div>{{option.name}}</div> 
 
      <select ng-model="opt" ng-options="opt for opt in option.data"> 
 
       <option value="">--- select ---</option> 
 
      </select> 
 
     </div> 
 
    </body> 
 
</html>

來源

2014-12-25 14:24:54

酷！謝謝你的回答，但是你怎麼能在一個選擇中得到兩個選項，而不是兩個，而是一個。是否可以通過html綁定或更好的方式在控制器中準備新的數組？謝謝：） – Experimenter

嵌套NG-重複與包含數組

回答

相關問題