0

我是 angularjs 的新手，只是尝试制作一个简单的计算器，用户可以在其中选择一种元素并设置权重来计算一些信息。我正在使用 ng-repeat 对不同的元素执行此操作，但我不知道如何从 ng-repeat 的不同迭代中检索信息。

这是一个演示：http ://plnkr.co/edit/gjNuHD4LzMINGFTXp8wD?p=preview

例如，用户在第一个输入框中输入一个数字并从ingredienti对象中选择一个类型，然后他可以填充第二行，我想输出例如 2 个输入的总和，或者每个输入除以一个值取自ingredienti对象。

这是可能的吗？这是一种正确的方法吗？

4

2 回答 2

1

我不是角度方面的专家，可能是解决这个问题的其他选择。但是，这就是我解决您的问题的方法：

我能够为每一行/每一行创建一个模型（一个对象），以便以后可以访问这些值以进行任何计算。然后在页面上呈现该模型。在每个更改事件上，我都会计算总和。只是一个想法，你可以扩展它。

// Initialize to 3 and create 3 models for it. A model 
// has ID the name of the field and so on, you add other fields to it. 
$scope.cntInputs = 3;
$scope.inputs = [];

for(var i=1; i <= $scope.cntInputs; i++){
  $scope.inputs.push({id:i,pesco:'',zuccheri:''});
}

// call this when you want to increase the `Numero ingredienti`
$scope.addModel = function (){
  $scope.inputs.push({id:$scope.cntInputs-1,pesco:'',zuccheri:''});
}

// call this whenever you have a change on each model. 
  $scope.calculate = function() {
  var sum =0;
  for(i=0; i <$scope.inputs.length; i++) { 
    sum += Number($scope.inputs[i].pesco)
    $scope.inputs[i].zuccheri = 100; // XX * peso/100 calculate however you want
  } 
  $scope.sum = sum;
};

/html正文

<body>
  <div ng-controller="bxController" id="content">

    <h1>Bilanciamento</h1>
    Numero ingredienti: <input type="number" ng-change="addModel()" ng-model="cntInputs" placeholder="#Inputs"><br/>


    <table>
      <tr>
        <th>Ingrediente</th>
        <th>Peso</th>
        <th>Zuccheri</th>
        <th>Grassi</th>
        <th>SML</th>
        <th>Altri Solidi</th>
        <th>Totale Solidi</th>
        <th>Acqua</th>
      </tr>
      //just to display how its working          {{inputs}}

      <tr ng-repeat="c in inputs" type="text"  name="myForm">
        <td>
          <select
              ng-change="selectAction()"
              ng-model="value"
              ng-options="value.ingrediente for value in ingredienti">
              <option>--</option>
          </select>
        </td>
        <td>
          <input ng-model="c.pesco" ng-change="calculate()" ></input>
        </td>
        <td> {{c.zuccheri | number}} g</td>
        <td>{{value.grassi * peso / 100 | number}} g</td>
        <td>{{value.sml * peso / 100 | number}} g</td>
        <td>{{value.altrisolidi * peso / 100 | number}} g</td>
        <td>{{value.totalesolidi * peso / 100 | number}} g</td>
        <td>{{value.H2O * peso / 100 | number}} g</td>
      </tr>

    </table>


 risultato:({{sum}}) 
  </div>

</body>
于 2013-10-18T18:19:21.507 回答
0

示例中有许多不同的错误。签出这个工作 plunkr：

http://plnkr.co/edit/roIbBuXMleu7o9bRtway?p=preview

$scope.cntInputs = 1;
$scope.inputs = [];

$scope.$watch('cntInputs', function(){
  for(var i= $scope.inputs.length; i < $scope.cntInputs; i++ ){
    $scope.inputs.push( {} );
  }

  $scope.inputs.splice($scope.cntInputs, $scope.inputs.length - $scope.cntInputs);

});

html:

 <tr ng-repeat="row in inputs" type="text" name="myForm">
    <td>
      <select
          ng-change="selectAction()"
          ng-model="row.value"
          ng-options="value as value.ingrediente for value in ingredienti">
          <option>--</option>
      </select>
    </td>
    <td>
      <input ng-model="peso" ng-change="test()" name="foo_{{$index}}"></input>
    </td>
    <td>{{row.value.zuccheri * peso / 100 | number}} g</td>
    <td>{{row.value.grassi * peso / 100 | number}} g</td>
    <td>{{row.value.sml * peso / 100 | number}} g</td>
    <td>{{row.value.altrisolidi * peso / 100 | number}} g</td>
    <td>{{row.value.totalesolidi * peso / 100 | number}} g</td>
    <td>{{row.value.H2O * peso / 100 | number}} g</td>
  </tr>
于 2013-10-18T18:55:32.163 回答