0

私はangularjsが初めてで、ユーザーが要素のタイプを選択し、重みを設定して情報を計算する簡単な計算機を作成しようとしています。ng-repeat を使用してさまざまな要素に対してこれを行っていますが、ng-repeat のさまざまな反復から情報を取得する方法がわかりません。

ここにデモがあります: http://plnkr.co/edit/gjNuHD4LzMINGFTXp8wD?p=preview

たとえば、ユーザーが最初の入力ボックスに数値を入力し、ingredientiオブジェクトからタイプを選択すると、2 行目を入力して、たとえば 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 に答える