ASP.NET 폼 데이터를 사용하는 AngularJS가 변경되지 않습니다.

Question

AngularJS를 사용하여 양식을 채우고 커밋하고 싶습니다. 변경 사항없이 양식을 제출하면 모델이 올바르게 변경됩니다. 또한 할당을 추가 할 때 기본값은 모델에 있습니다. 그러나 값을 변경하면 변경 사항이 모델에 표시되지 않습니다 (여전히 기본값). HTML

<div data-ng-app="BudgetApp"> 
    <div data-ng-controller="BudgetController"> 
     <table class="table table-striped table-bordered"> 
      <thead> 
       <tr> 
        <th>Allocation For</th> 
        <th>Percent Allocated</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="allocation in model.Allocations"> 
        <td> 
         <input value="{{allocation.Id}}" 
           type="hidden" /> 
         <input value="{{allocation.Description}}" 
           type="text" 
           class="form-control" /> 
        </td> 
        <td> 
         <input value="{{allocation.Percent}}" 
           type="text" 
           class="form-control" /> 
        </td> 
        <td> 
         <a class="btn btn-danger btn-xs" ng-click="remove($index)"> 
          <i class="glyphicon glyphicon-remove"></i> 
         </a> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     <a class="btn btn-default" ng-click="add()">Add Allocation</a> 
     <a class="btn btn-primary" ng-click="save()">Save</a> 
    </div> 
</div> 

JS

@section Scripts{ 
    <script src="~/Scripts/angular.min.js"></script> 
    <script> 
     (function() { 
      var app = angular.module("BudgetApp", []); 

      app.controller('BudgetController', ['$scope', '$http', function ($scope, $http) { 
       console.log("start"); 

       var uri = "/api/Budget/GetBudget/" + @ViewBag.ID; 
       $scope.model = []; 
       $scope.model.Allocations = []; 
       $http.get(uri).success(function(data) { 
        $scope.model = data; 
        console.log("qdsfsq"); 
       }); 

       $scope.add = function() { 
        $scope.model.Allocations.push({ 
         Id: 0, 
         Description: 'test', 
         Percent: 0 
        }); 
       }; 

       $scope.remove = function (index) { 
        $scope.model.Allocations.splice(index, 1); 
       }; 

       $scope.save = function() { 
        $http.post('/api/Budget/UpdateBudget', $scope.model).success(function(data) { 
         // window.location.href = "/widget"; 
        }); 
       }; 
      }]); 

     })(); 
    </script> 
} 

Answer 1

당신이 데이터에게 NG 반복을 결합하는 방법을 변경하고 ng-model 대신 value에 바인딩을 변경해야이 문제를 해결하려면. 아래처럼 보일 것입니다 :

<tr ng-repeat="allocation in model.Allocations"> 
    <td> 
     <input ng-model="allocation.Id" type="hidden" /> 
     <input ng-model="allocation.Description" type="text" class="form-control" /> 
    </td> 
    <td> 
     <input ng-model="allocation.Percent" type="text" class="form-control" /> 
    </td> 
    <td> 
     <a class="btn btn-danger btn-xs" ng-click="remove($index)"> 
      <i class="glyphicon glyphicon-remove"></i> 
     </a> 
    </td> 
</tr> 

값을 변경하면 모델에도 성공적으로 표시되어야합니다. 이게 도움이 되길 바란다.