动态角度模型？

Question

好吧，所以我正在为假货建造一个假的盘子制造商。 我有一个表格，其中包含构建该表格所需的一切，而我唯一遇到的麻烦是成分表。 这是我的HTML：

    <div class="icheckbox" ng-repeat="ing in ingredientList">
      {{ing}}
      <input type="checkbox" name="{{ing}}" ng-click="addIngredient(ing)"/>
      <input type="number" name="more" ng-model="ings.ing.more" placeholder="price for extra"/>
      <input type="number" name="less" ng-model="ings.ing.less" placeholder="price for less/none"/>
    </div>

这是（相关的）JS：

$scope.ings = {};    

$scope.ingredientList = ['lettuce', 'tomatoe', 'steak', 'pulled pork', 'green onion', 'red onion', 'mozarella', 'cheddar', 'bacon bits', 'chicken'];


$scope.addIngredient = function(which){
    $scope.ings[which] = which;
}
$scope.makeItem = function(item){
    item.ingredients = $scope.ings;
    console.log(item);
    ItemService.createItem(item)
      .then(handleRes, handleRes);
}

正如您确定的那样，当我尝试在复选框中查找特定成分并为该特定成分或多或少添加价格修饰符时，它会修改列表中所有成分的价格。 例如，由于模型的原因，我不能有单独的修饰符。 我知道这是模型的问题，但是如何重写代码以完成我的工作呢？

对于那些在选择了正确答案后阅读此书的人，请参见此处的小提琴，以查看我所使用的内容的更准确的HTML。 顺便说一句，小提琴无法完全正常工作（出于我不知道的原因，但我很少使用JSFiddle），但是如果您看到我认为的内容，那么很容易理解我正在尝试做的事情。 http://jsfiddle.net/Lrpjwyrg/13/

Answer 1

我不知道这是否是正确的答案。 但我认为它接近您想要的。

 angular.module('app', []) .controller('cntrl', function ($scope) { $scope.ingredientList = [{ name: 'lettuce', count: 0, price: 23, selected: false }, { name: 'tomatoe', count: 0, price: 87, selected: false }, { name: 'steak', count: 0, price: 98, selected: false }, { name: 'pulled pork', count: 0, price: 292, selected: false }]; $scope.setItOne = function (idx) { if ($scope.ingredientList[idx].count < 1) { $scope.ingredientList[idx].count = 1; } updateSelectedingredients(); }; function updateSelectedingredients() { $scope.selectedingredients = $scope.ingredientList.filter(function (item) { return item.selected; }); } $scope.getTotal = function(){ var total = 0; ( $scope.selectedingredients || []).forEach(function(item){ total = total + item.count * item.price; }); return total; }; $scope.makeItem = function () { alert(JSON.stringify($scope.selectedingredients)); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="cntrl"> <div class="icheckbox" ng-repeat="ing in ingredientList">{{ing.name}} <input type="checkbox" name="{{ing}}" ng-model="ing.selected" ng-change="setItOne($index)" /> <button ng-click="ing.count = ing.count + 1">Up</button> <button ng-click="ing.count = ing.count - 1" ng-disabled="ing.count < 1">Down</button> | {{ing.count}} x {{ing.price | currency}} = {{ing.count * ing.price | currency}} </div> <hr/> <div>Selected items <ul> <li ng-repeat="item in selectedingredients">{{item.name }} x {{item.count}} -> {{item.count}} x {{item.price | currency}} = {{item.count * item.price| currency}}</li> </ul> <b>Total: {{ getTotal() | currency}}</b> </div> <button ng-click="makeItem()">Make Item</button> </div> </div> 

Answer 2

我有点改变你的小提琴：

首先，使用ng-model="ings[ing].more"和ng-model="ings[ing].less" 。
第二，将对象保存在ings数组中，而不只是字符串

$scope.addIngredient = function(which) {
  $scope.ings[which] = {
    name: which
  };
}

 angular.module('CpCtrl', []).controller('ControlPanelCtrl', [ '$scope', function($scope) { $scope.message = ''; $scope.inglist = ['lettuce', 'tomatoe', 'steak', 'pulled pork', 'green onion', 'red onion', 'mozarella', 'cheddar', 'bacon bits', 'chicken']; $scope.sauceList = ['bbq', 'ranch', 'nacho cheese', 'yum sauce']; $scope.ings = {}; $scope.addIngredient = function(which) { $scope.ings[which] = { name: which }; } $scope.makeItem = function(item) { item.ingredients = $scope.ings; console.log(item); } } ]); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="container-fluid text-center" ng-app="CpCtrl" ng-controller="ControlPanelCtrl"> <div class="row"> <div class="page-title text-center"> <h3> Welcome</h3> </div> </div> <div class="row"> <div class="jumbotron"> <h2> Make Item </h2> <form> <div class="form-group"> <label for="itemname">Item Name</label> <input class="form-control" type="text" ng-model="item.itemname" id="itemname" /> </div> <div class="form-group"> <label for="itemdescription">Item Description</label> <textarea class="form-control" ng-model="item.itemdescription" id="itemdescription"></textarea> </div> <!-- pizza, sub or spud --> <label> <div class="icheckbox_square-green"> <input type="checkbox" name="pizza" ng-model="item.pizza" ng-click="setBase()" />Pizza </div> </label> <label> <div class="icheckbox"> <input type="checkbox" name="sub" ng-model="item.sub" ng-click="setBase()" />Sub </div> </label> <label> <div class="icheckbox"> <input type="checkbox" name="spud" ng-model="item.spud" ng-click="setBase()" />Spud </div> </label> <!-- end --> <!-- prices --> <div class="form-group"> <label for="spud-price" ng-if="item.spud">Spud Price</label> <input class="form-control" type="number" name="spud-price" ng-if="item.spud" id="spud-price" ng-model="item.price.spud" /> </div> <div class="form-group"> <label for="pizza-price" ng-if="item.pizza">Pizza Price</label> <input class="form-control" type="number" name="pizza-price" ng-if="item.pizza" ng-model="item.price.pizza" /> </div> <div class="form-group"> <label for="sub-price" ng-if="item.sub">Sub Price</label> <input class="form-control" type="number" name="sub-price" ng-if="item.sub" ng-model="item.price.sub" /> </div> <!-- end --> <!-- ingredients --> <div ng-repeat="ing in inglist"> {{ing}} <input type="checkbox" name="{{ing}}" ng-click="addIngredient(ing)" /> <input type="number" name="more" ng-model="ings[ing].more" placeholder="price for extra" /> <input type="number" name="less" ng-model="ings[ing].less" placeholder="price for less/none" /> </div> <!-- end --> <!-- picture --> <div class="form-group"> <label for="picture">Add Picture(s)</label> <input type="file" name="picture" /> </div> <!-- end --> <a class="btn btn-primary" ng-click="makeItem(item)">Create</a> </form> </div> </div> <!-- end item creation -->