0

이 나는 ​​온라인 dynamic form jsFiddle code동적 형태의 각도 문제

총과 총계가 자동으로 업데이트되지 않습니다이 코드를 작성했습니다. 이전에 좀 더 간단한 예가 있었지만 하나의 모델 항목으로 작업했지만 배열을 만들었지 만 이제는 작동하지 않습니다. 내 실제 프로그램은 건물이 더 많은 분야가있을 것입니다 그리고 나는 그것이 작동합니다 보여주기 위해 예를 만들기 위해 노력하고 있어요. 누군가가 내가 잊고있는 바보 같은 것을 빨리 볼 수 있습니까?

<div ng-controller="MyCtrl"> 
    <form name="myForm"> 
     <div ng-repeat="item in items track by $index"> 
      <input type="text" ng-model="item.a"> 
      <input type="text" ng-model="item.b"> 
      <input type="text" ng-model="item.c"> 
      <label>Total: </label><label ng-bind="total(item)"></label> 
     </div> 
    </form> 
    <div> 
    <label>Grand Total: </label><label ng-bind="grandTotal()"></label> 
    </div> 
</div> 

var myApp = angular.module('myApp', []); 

myApp.controller('MyCtrl', function($scope) { 
     $scope.items = [ 
     { 
     a: 0, b: 0, c: 0 
     }, 
     { 
     a: 0, b: 0, c: 0 
     }]; 

    $scope.total = function(item) { 
     var result = item.a * item.b * item.c; 

     return isNaN(result) ? 0 : result; 
    }; 

    $scope.grandTotal = function() { 
     var result = 0; 

     angular.forEach($scope.items, function(item) { 
     result += $scope.total(item); 
     }); 

     return isNaN(result) ? "" : result.toString(); 
    }; 
}); 

답변

1

ng-bind$scope이 없어야합니다. 뷰 바인딩에서 $scope을 언급 할 필요는 없으며 컨트롤러의 $scope/this (컨텍스트)을 직접 참조합니다.

그 외 모든 입력 필드에서 양방향 바인딩을 사용하려면 모든 입력의 ng-bind에서 ng-model으로 변경하십시오.

마크 업

<input type="text" ng-model="item.a"> 
<input type="text" ng-model="item.b"> 
<input type="text" ng-model="item.c"> 

ng-bind="total(item)" 

Forked JSFiddle

+0

'$ scope'이 제거 된 상태에서도 총계가 표시되지 않습니다. – Zach

+0

그는 ''에 대해 'ng-bind'를 'ng-model'으로 변경해야합니다. 답에 이것을 추가하십시오. – Zach

+0

피들 http://jsfiddle.net/Lhkedykz/15/를 업데이트했습니다. 여전히 작동하지 않습니다. 그것은 처음부터 내 총 기능을 호출하지만, 값을 입력하기 시작한 후에는 다시는 호출하지 않습니다. – kyleb