如何只更新ng repeat中的部分元素

How to only update some part of elements in ng-repeat?

本文关键字：元素 repeat 更新 ng      更新时间：2023-09-26

我在一个表中使用ng repeat，我想使用post方法从服务器获取数据，并更新vararry和angularjs将更新；然而，文本输入也已更新，但我不想更新文本。我该怎么办？

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">
<head>
    <script src="js/angular.js"></script>
</head>
<body ng-controller="formController">
<table border='1' cellpadding=2 cellspacing=2>
    <tr ng-repeat="a in array.Ip">
        <td>{{a.name}}</td>
        <td>{{a.price}}</td>
        <td>{{a.count}}</td>
        <td><input type="text"></td>//This should not be updated!
        <td><button>Add</button></td>
    </tr>
</table>
</body>
</html>
<script>
    var app = angular.module('app', []);
    app.controller('formController', function($scope) {
        $scope.array = {
           TotalFinished : '12',
           TotalUnFinished : '13',
           Cpu : '14',
           Memory :'15',
           Ip : [{
                name : 'AAA',
                price : '20',
                count : '2'
                }, {
                name : 'BBB',
                price : '50',
                count : '1'
                }]
        };
       setInterval(function(){
             $scope.$apply(updatedata);
           },1000);
        var updatedata = function(){
            $scope.array ={
                TotalFinished : '14',
                TotalUnFinished : '13',
                Cpu : '14',
                Memory :'15',
                Ip : [{
                    name : 'CCC',
                    price : '20',
                    count : '2'
                }, {
                    name : 'DDDD',
                    price : '50',
                    count : '1'
                }]
            }; // 表格数据
            };
    });
</script>

您可以在文本框中使用模型值。

<tr ng-repeat="a in array.Ip">
    <td>{{a.name}}</td>
    <td>{{a.price}}</td>
    <td>{{a.count}}</td>
    <td><input type="text" ng-model='a.value'></td>
    <td><button>Add</button></td>
</tr>

在您的控制器中，向Ip阵列添加值属性

for(var i=0;i<$scope.array.Ip;i++){
      $scope.array.Ip[i].value = '';
}

这样，文本框中的任何更改都会被angular$watch函数跟踪。当数组值在ng重复中发生变化时，文本框中的值将从您创建的新范围变量中获取。

它没有按照以前的方式工作的原因是，ng repeat是一个指令，当数组的作用域值发生变化时，它会重新渲染整个<td>面板，如果没有为文本框分配作用域值，它将在没有任何值的情况下进行渲染。

希望这能有所帮助。

相关文章：