angularJS에서 ngrepeat의 이상한 행동

Question

ng-repeat과 관련하여 문제가 발생했습니다. 모든 값을 최신 값으로 바꿉니다.

예. 텍스트 상자에 값을 추가 한 다음 ng-repeat div에 해당 값을 추가하지만 마지막 값을 입력 한 모든 값을 바꿉니다. 당신은 하나의 statusObj이 있고 그것을 누군가가 추가 새로운 상태 버튼을 클릭 할 때마다 변경되기 때문에 여기에

는 Jsfiddle

https://jsfiddle.net/mahajan344/9bz4Lwxa/656/

Answer 1

이 일어나고있다. 삭제 statusObj 지금 가지고 있고, AddNewStatus 방법은 새 매번 만들 수 있습니다

var xyzApi = xyzApi || { 
 
    sayHello: function() { 
 
    return "hey there\n"; 
 
    } 
 
}; 
 

 
angular.module('demoApp', []) 
 
    .controller('MainController', MainController) 
 
    .provider('xyzApi', function XyzApiProvider() { 
 

 
    this.$get = function() { 
 

 
     var xyzApiFactory = { 
 
     otherFunction: function() { 
 
      //$log.log('other function called'); 
 
      return 'other function \n'; 
 
     } 
 
     }; 
 
     //console.log(xyzApiFactory, xyzApi); 
 
     angular.merge(xyzApiFactory, xyzApi); 
 
     return xyzApiFactory; 
 
    }; 
 
    }); 
 

 

 
function MainController(xyzApi) { 
 
    var vm = this; 
 
    vm.test = ''; 
 
    vm.listOfStatus = []; 
 
    vm.showStatusError = false; 
 
    vm.statusText = ""; 
 

 
    vm.sayHello = function() { 
 
    vm.test += xyzApi.sayHello() + xyzApi.otherFunction(); 
 
    } 
 

 
    vm.AddNewStatus = function(statusText) { 
 
    if (statusText.length < 1) { 
 
     vm.showStatusError = true; 
 
     return; 
 
    } else { 
 
     vm.showStatusError = false; 
 
    } 
 

 
    var statusObj = { 
 
     StatusComment: statusText, 
 
     scId: 0, 
 
     scTimeStamp: new Date(), 
 
     JobNum: 0, 
 
     IsNew: 0, 
 
    }; 
 

 
    vm.listOfStatus.push(statusObj); 
 
    vm.statusText = ""; 
 
    }; 
 

 
    vm.RemoveStatus = function(index) { 
 

 
    vm.listOfStatus.splice(index, 1); 
 

 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script> 
 
<div ng-app="demoApp" ng-controller="MainController as mainCtrl"> 
 
    <pre>{{mainCtrl.test}}</pre> 
 
    <button ng-click="mainCtrl.sayHello()"> 
 
    say hello!! 
 
    </button> 
 

 
    <div id="DivStatus"> 
 
    <div class="form-group"> 
 
     Status 
 
     <div class="col-md-3 col-sm-3 col-xs-12"> 
 
     <input type="text" ng-model="mainCtrl.statusText" id="txtStatus" class="form-control col-md-7 col-xs-12"> 
 
     <div class="text-danger error-message" id="txtStatusError" ng-show="showStatusError">Please enter new status</div> 
 
     </div> 
 
     <div class="col-md-3 col-md-3x col-sm-3 col-xs-12"> 
 
     <input type="button" class="btn" ng-click="mainCtrl.AddNewStatus(mainCtrl.statusText)" value="Add New Status" /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group" ng-repeat="statusObj in mainCtrl.listOfStatus track by $index"> 
 

 
     <div class="col-md-3 col-sm-3 col-xs-12"> 
 
     <input type="text" value="{{statusObj.StatusComment}}" ng-disabled="true" class="form-control col-md-7 col-xs-12"> 
 
     </div> 
 
     <span class="remove-record" ng-click="mainCtrl.RemoveStatus($index)" style="cursor:pointer"><i class="fa fa-times"></i></span> 
 

 
    </div> 
 
    </div> 
 
</div>

을