javascript - 动态 Angular 模型？

Question

好吧，我正在为一家餐厅 build 一个假餐具制造商。我有一个表格，其中包含构建它所需的所有内容，而我唯一遇到麻烦的是成分列表。这是我的 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);
}

正如我确信您已经猜到的那样，当我尝试选中特定成分的复选框并为该特定成分添加或多或少的价格调节剂时，它会修改列表中所有成分的价格。例如，由于模型的原因，我无法拥有单独的修改器。我知道这是模型的问题，但是我如何重写代码来完成我正在做的事情？

对于那些在选择正确答案后阅读本文的人，请参阅此处的 fiddle 以查看我正在使用的内容的更准确的 HTML。顺便说一句， fiddle 并不完全有效(出于我不知道的原因，但我很少使用 JSFiddle)，但如果你看到它，我认为它非常容易理解我想要做什么。 http://jsfiddle.net/Lrpjwyrg/13/

Answer 1

我稍微改变一下你的 fiddle :

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