角度，循环对象数组中的一个选择并显示两个值

问题描述：

我在应用程序工作，我得到这个复杂的情况下选择和选择值。如果有必要我可以重新安排我的json来解决我的问题，我有一个json回答“部分”。角度，循环对象数组中的一个选择并显示两个值

"products": [ 
    {...}, 
    {...}, 
    { 
     // Here the json 
     "id": 13, 
     "hightlighted": true, 
     // Here the portions that i loop in the "select" 
     "portions": [ 
      { 
       "size": "De 10 a 20 porciones", 
       "price": "20" 
      }, 
      { 
       "size": "De 20 a 30 porciones", 
       "price": "30" 
      }, 
      { 
       "size": "De 30 a 40 porciones", 
       "price": "40" 
      } 
     ] 
    } 
] 

<div class="item" ng-repeat="product in products"> 
// Here is my try one 
<select class="form-control" ng-init="size=product.portions[0].size" ng-model="size" > 
    <option ng-repeat="p in product.portions" value="[[p.size]]" > 
     [[p.size]] 
    </option> 
</select> 
<div> 
    [[I need here the selected PRICE]] <br> 
    [[size]] <br> 
</div> 

// My try 2 
<select class="form-control" ng-init="price=product.portions[0].price" ng-model="price" > 
    <option ng-repeat="p in product.portions" value="[[p.price]]" > 
     [[p.size]] 
    </option> 
</select> 
<div> 
    [[price]] <br> 
    [[I need here the selected SIZE]] 
</div> 
</div>

谢谢你的帮助。

编辑。我使用[[]]代替{{}}

.config(function($interpolateProvider) { 
    $interpolateProvider.startSymbol('[['); 
    $interpolateProvider.endSymbol(']]'); 
});

这里溶液!!! 谢谢 solution

您应该使用{{}}数据绑定，而不是[[]]。请参阅此处选择的文档：[https://docs.angularjs.org/api/ng/directive/select](https://docs.angularjs.org/api/ng/directive/select） – buzzsaw

@buzzsaw i am使用[[]]而不是{{}}。 – RollRodrig

你也可以添加你的控制器，它在html中的位置？ –

答

我认为使用ng-options更好。 Ng-init只能用于ng-repeat别名。

angular.module('myApp',[]) 
 
.config(function($interpolateProvider) { 
 
    $interpolateProvider.startSymbol('[['); 
 
    $interpolateProvider.endSymbol(']]'); 
 
}) 
 

 
.controller('MyController', function($scope){ 
 

 
    $scope.product = { 
 
"id": 13, 
 
"hightlighted": true, 
 
// Here the portions that i loop in the "select" 
 
"portions": [ 
 
    { 
 
     "size": "De 10 a 20 porciones", 
 
     "price": "20" 
 
    }, 
 
    { 
 
     "size": "De 20 a 30 porciones", 
 
     "price": "30" 
 
    }, 
 
    { 
 
     "size": "De 30 a 40 porciones", 
 
     "price": "40" 
 
    } 
 
] 
 
    } 
 
    
 
    $scope.product.selectedPortion = $scope.product.portions[0]; 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 
 

 
<div ng-app='myApp' ng-controller="MyController"> 
 
<select class="form-control" ng-options="p as p.size for p in product.portions" ng-model="product.selectedPortion" > 
 
</select> 
 
<div> 
 
    [[product.selectedPortion.price]] <br> 
 
</div> 
 
</div>

谢谢你，我在代码笔和作品上做的，也是我做了一点改变[链接]（http://codepen.io/anon/pen/ZbaJJv） – RollRodrig

答

您正在寻找ngOptions。

鉴于我了解您的情况，select as label for value in array是正确的方法。

<select ng-options="portion.price as portion.size for portion in portions">

与我的相同，但更简洁。 – shaunhusain

谢谢@KGChristensen它也帮助我解决了我的问题，这里的解决方案[解决方案]（http://codepen.io/anon/pen/ZbaJJv） – RollRodrig

角度，循环对象数组中的一个选择并显示两个值

相关推荐