2017-04-04 5 views
0

以下のコードを見ると、選択した各ドロップダウンリストをどのように区別するのですか?オプション値がng-repeatで動的に反復されない

すべてのドロップダウンが選択されている場合、同じ値が表示されます。

要件レスポンス構造に基づいて1から10までのオプション値(配列で宣言されています)から3つのドロップダウンを動的に表示する必要がありました。この場合は3つの製品があるため、3つの動的ドロップダウンを表示する必要があります。

これを達成するための効率的な方法は何ですか?

HTML

<div ng-controller="MyCtrl"> 
     <div ng-repeat="product in colors.item"> 
     <div ng-if="quan!=true"> 
      <select ng-model="selectedItems.val" ng-init="selectedItems.val = selectedItems.val + ''"> 
       <option ng-repeat="value in arr | limitTo:quantity">{{value}}</option> 
     </select> 
    </div> 
    </div> 
<div> 
    <a href="#" ng-click="submit(selectedItems.val)">Submit</a> 
</div> 
</div> 

JS

 var myApp = angular.module('myApp',[]); 

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

myApp.controller('MyCtrl', function MyCtrl($scope) { 

$scope.colors = {"category": "students" 
"item":[ 
    { 
    "product":{ 
      "name":"abc", 
      "age": "24" 
    } 
    "boo": true 
    }, 
    { 
    "product":{ 
      "name":"def", 
      "age": "44" 
    } 
    }, 
    { 
    "product":{ 
      "name":"ghi", 
      "age": "22" 
    } 
    } 
    ]}; 
$scope.quan = false; 
$scope.arr = []; 
for(var a=1; a<=10; a++) { 
    $scope.arr.push(a); 
} 
$scope.selectedItems = {val : $scope.arr[0]}; 
$scope.quantity = 10; 
$scope.submit = function(av){ 
alert(av); 
} 

}); 

JSFIDDLE CODE

+0

? – tanmay

+0

これも試しましたが、これをロードするときにインジェクタエラーが発生しました –

+0

予想される動作は何ですか? – tanmay

答えて

1

問題は、あなたのselectedItemsあるであり、あなたはcolorsとしてarrayを持っています。

あなたはこのようなcolors内部selectedItemsを持つことができます。

$scope.colors.map(function(obj) { 
    return obj.selectedItems = { 
    val: $scope.arr[0] 
    } 
}) 

、このようなあなたの<select>を変更:

<select ng-model="product.selectedItems.val" ng-init="product.selectedItems.val = product.selectedItems.val + ''"> 
    <option ng-repeat="value in arr | limitTo:quantity">{{value}}  
    </option> 
</select> 

そして、submitようなこと:

$scope.submit = function() { 
    $scope.colors.forEach(function(obj) { 
    console.log(obj.selectedItems.val) 
    }) 
} 

working fiddle

また、あなたは、コード内のいくつかのエラーが発生しましたcolors

0

全ての選択ドロップダウンbewteen区別するために、ID = {{$インデックス+ 1}}のような要素を選択するための一意のIDを提供します。

-1

よりselectedItems別々のを持っている最初のng-repeat$indexを利用することができます。 $ scope.product jsonで2つのカンマが見つかりませんでした。 `NG-options`を使用しない理由

See updated working fiddle 

http://jsfiddle.net/dy1vw7v5/9/

関連する問題