Question

低于ng-repeat功能

$ scope.clientsAll是一个列出所有客户端的集合。

<div ng-repeat="client in clientsAll">
  <div class="col-sm-6 type2 adminExistingText pLeftZ">
    <span id="nameText">{{client.name}}</span>
  </div>
  <input type="text" name="terminationdate['terminationdate_'+$index]" init="terminationdate['terminationdate_'+$index]=client.effective_end_dt" ng-model="terminationdate['terminationdate_'+$index]">
  <button type="button" ng-click="cancelExistingClient($index)">change</button>
</div>

我正在按钮点击事件中更改集合，即从集合中删除项目，如下所示

$scope.cancelExistingClient= function (index) {
        // Remove the user from the array instead of reloading the entire list again. If removed from list, this will remove from the UI (ng-repeat) without affecting the other accordions
        var clientFound = $filter('filter')($scope.clientsAll, { "id": index}, true)[0];
        var clientPosition = $scope.clientsAll.indexOf(clientFound);
        $scope.clientsAll.splice(clientPosition, 1);
        $scope.$apply();
    }

更改集合后，该项目将从列表中删除，但客户端的终止日期不会更新到模型。即client.effective_end_dt包含值，但它没有更新为终止[＆＃39; terminationdate _＆＃39; + $ index]。我不确定更改clientsAll变量时是否重复呈现ng-repeat。

客户端的结构如下所示

  $scope.clientsAll=[{"id":1, "name":'xxx',"effective_end_dt":'2/3/2017'}]

当我从集合中删除项目时，我想确保terminatedate模型应该保持客户端有效结束日期的值。当我刷新页面时，所有客户端都正确地列出日期。

Answer 1

您正在尝试使用索引属性从数组中splice项，即您在$index函数中传递ng-click，这可能会使某些情况混淆。

尝试在ng-repeat中传递ng-click变量，并根据该变量splice传递数组中的项目。

试试这个

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">

		angular.module('myApp',[])
		.controller('myCtrl', function myCtrl($scope,$filter) {
			$scope.clientsAll= [{"id":1, 
			"name":'xxx',
			"effective_end_dt":'2/3/2017'
		},{"id":2, 
		"name":'yyy',
		"effective_end_dt":'8/8/2017'
	},{"id":3, 
	"name":'zzz',
	"effective_end_dt":'11/11/2017'
}];

$scope.cancelExistingClient= function (item) {
        // Remove the user from the array instead of reloading the entire list again. If removed from list, this will remove from the UI (ng-repeat) without affecting the other accordions


        angular.forEach($scope.clientsAll, function(index) {
        	if (index.id == item.id) {
        		var arrayIndex = $scope.clientsAll.indexOf(index);
        		if (arrayIndex > -1) {
        			$scope.clientsAll.splice(arrayIndex, 1);
        		}
        	}
        })


        // var clientFound = $filter('filter')($scope.clientsAll, { "id": index}, true)[0];
        // var clientPosition = $scope.clientsAll.indexOf(clientFound);
        // $scope.clientsAll.splice(clientPosition, 1);
        // $scope.$apply();
    }

})



</script>

</head>

<body ng-controller="myCtrl">
	<div ng-repeat="client in clientsAll">
		<div class="col-sm-6 type2 adminExistingText pLeftZ">
			<span id="nameText">{{client.name}}</span>
		</div>
		<input type="text" name="terminationdate['terminationdate_'+$index]"
		init="terminationdate['terminationdate_'+$index]=client.effective_end_dt"
		ng-model="client.effective_end_dt">
		<button type="button" ng-click="cancelExistingClient(client)" >change</button>
	</div>
</body>

</html>

＆＃13;

Answer 2

您可以使用.filter()：

ng-click="cancelExistingClient(client)"

$scope.cancelExistingClient = function(obj){
    $scope.clientAll = $scope.clientAll.filter((client) => client.name !== obj.name);
};

Answer 3

试试这个，

 <div ng-repeat="client in clientsAll" ng-model="$index = getCurrIndex(client)">
    <div class="col-sm-6 type2 adminExistingText pLeftZ">
    <span id="nameText">{{client.name}}</span>
    </div>
    <input type="text" name="terminationdate[$index]"                                                                    
    ng-model="terminationdate[$index] = client.effective_end_dt">
    <button type="button" ng-click="cancelExistingClient($index)">change</button>                                                         
</div>

$scope.cancelExistingClient= function (index) {
   $scope.clientsAll.splice(index, 1);
   $scope.$apply();
}

$scope.getCurrIndex = function (client){
  return $scope.clientsAll.indexOf(client);
}

在单击函数angularjs中更改集合时，ng-repeat不会触发

3 个答案: