好吧，所以我正在为假货建造一个假的盘子制造商。 我有一个表格，其中包含构建该表格所需的一切，而我唯一遇到的麻烦是成分表。 这是我的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/

===============>>#1 票数：0

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

 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>

===============>>#2 票数：0 已采纳

我有点改变你的小提琴：

首先，使用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 -->

  ask by h3xc0ntr0l translate from so

未解决问题？本站智能推荐：

2回复

如何在角度访问动态生成的模型的值

我在controlller中设置i的值，当我检查文本框时，会反映ng-model =“ album1”或其他i的值。 但是现在在按钮上单击我需要将此模型值传递给某些功能。 有人可以让我知道如何获取此动态模型值吗？ 我做了以下模式来访问模型值： {{专辑+ I}}
1回复

动态创建类似角度对象的视图模型

我处于一种奇怪的情况下，我需要为选定的角度元素创建动态视图模型。 考虑一下，我在html视图中有三个不同的指令称为<paragragh> ，它们都连接到单个控制器ParagraphController 。 由于需要在它们之间共享设置，因此我定义了一个服务来保存名为Paragr
7回复

角度ng模型动态getter和setter

我想将ng-model与外部模型服务一起使用。 该模型有两种方法：getValue（变量）和setValue（变量）。 所以在我的HTML中，我希望能够做到： 注意：我的控制器中的$ scope上没有定义balance。 而且因为我们处理的是4000多个不同的变量，所以我不
4回复

如何动态设置模型名称的角度？

如何在ng-repeat循环中动态设置模型名称 在上面的这里，我必须动态设置名称和ng-model的值，就像每当发生循环时，父控制器的$ parent.cat0，$ parent.cat1，$ parent.cat2一样 。 我尝试了以下方法： 我尝试了以上方法，但没有解决
2回复

如何在角度2中为动态加载的子组件提供父模型？

我在Angular 1.x应用程序中内置了许多指令。 这些指令被我公司的各种内部应用程序使用。 我希望这些应用程序不必更改其代码，而是在升级到Angular 2.x时在我的指令中抽象出许多语法更改。 例如，假设我有以下指令： 假设我无法从父组件的角度更改该语法，那么这些属性需要转换
2回复

必须使用模型值动态设置角度js，ngTable数据标题

在角度表http://plnkr.co/edit/CBcbkc?p=preview中 ，是否可以使用其他一些列的模型值动态替换数据标题属性？ 例如，在 我想要data-title = {{user.age}} 请不要介意这个例子对于这个例子是否有意义，但在我的复杂应用程序中，
1回复

角度模型未更新

嗨，我正在尝试根据单选按钮的值更新模型。 我读到它可能在$ parent范围内，但是我无法弄清楚。 我对棱角还很陌生，仍在尝试了解范围。 任何帮助表示赞赏。 代码：我将单选按钮的值绑定到ng-model =“ amount”，但它们根本不会更新。 这是我的jsbin和我的代码。
1回复

角度动态选择

html 角度的 使用上面的代码，我试图生成一个动态的1-（amount + 1）范围下拉列表。 似乎一切正常，除了下拉菜单中添加了一个空值。 为什么要增加这个空值？ EG，当数量为1时，生成的列表为 它应该是
1回复

带角度的动态属性

我想将lang ='fa'属性添加到表单中的angular所有的input：text。 有一点条件：如果body的类为fa all，则所有input:text 而不是email类型，请获取lang =“ fa”属性。 我知道如何用jquery做到这一点，但我不知道如何以有角度的方式做
1回复

角度的动态URL

我目前Angular 1.6和angular-ui / ui-router我有动态url的问题，我不知道参数的限制 例 从示例url我需要使用ui-route来管理该url并从url获取值参数，并且只实现一个状态。 预期结果 示例路由（*只有一个状态处理这种情况）