Angularjs从ng-repeat检索值

问题描述：

我是angularjs的新手，试图制作一个简单的计算器，用户选择一种元素并设置权重来计算一些信息。我正在做这个不同的元素，使用ng-repeat，但我不知道如何检索ng-repeat的不同迭代信息。Angularjs从ng-repeat检索值

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

例如，用户输入在第一输入框中键入一个数字，然后从ingredienti对象类型，那么他就可以填充第二线和我想例如输出2个输入的总和或每个输入除以从ingredienti对象中取出的值。

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

答

我不是角度专家，可能是其他选项来解决这个问题。但是，这是我如何解决您的问题：我能够为每行/每行创建一个模型（一个对象），以便以后可以访问任何计算值的模型（一个对象）。然后在页面上渲染该模型。在每次更改事件中，我将计算总和。只是一个想法，你可以扩展它。

// 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>

太慢，但我会建议几乎同样的事情。每行一个模型。我不妨发布[plunker]（http://plnkr.co/edit/W8n8UK?p=preview）。这很相似，但是使用观察者来解决问题。 – Andyrooger

感谢您的帮助，我现在想了解一下这个方法，但是现在如果我想要做这样的事情： '$ scope.getSumZuccheri = function（）{ var sum = 0;对于（var i = 0; i

我会把它们放在相同的模型中，并计算所有的模型。{id：$ scope.cntInputs-1，pesco：''，other1：''，other2：''}'你可以将你的计算全部移到你的计算方法中。实际上建议最好不要对观点进行计算。 – Alidad

答

有在例如，许多和不同的错误。结帐这个工作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>

这不起作用，risultato没有任何价值。 – dxvargas

Angularjs从ng-repeat检索值

相关推荐