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>