search

Home  >  Q&A  >  body text

angular.js - angularJS ng-repeat

The page uses ng-repeat to generate views. Modified the ng-model of ng-repeat in the controller. Why is the view not modified? 

$scope.search = function(page){
        $scope.orData.page = page==0?1:page;
        $scope.$watch("orData", function(){
            orderService.searchData($scope.orData).then(function(res){
                $scope.res = res.data;
                if ($scope.res != undefined) {
                    if ($scope.res.page_items.length == 0) {
                        alert("没有订单数据");
                    }else{
                        $scope.tds = $scope.res.page_items;
                        $timeout(function(){
                            console.log($scope.tds);
                        }, 1000);
                    };
                }else{
                    $scope.tds = "";
                    $("#orPaging").empty();
                    alert("订单号不能为非数字");
                };
            });
        });
    };
//
<tbody>
    <tr ng-repeat="td in tds"><!--  -->
        <td>{{td.tid}}</td>
        <td>{{td.created}}</td>
        <td>{{td.buyer_nick}}</td>
        <td>{{td.payment}}</td>
        <td>{{td.shop_name}}</td>
        <td>{{td.title}}</td>
        <td>{{td.seller_memo}}</td>
        <td>{{td.shipping_type}}</td>
        <td>{{td.status}}</td>
        <td>{{td.receiver_name}}</td>
        <td><button type="button" class="btn btn-primary btn-sm" data-tid="{{td.tid}}" ng-click="detail($event)">查看</button></td>
                    </tr>
</tbody>

When $scope.tds is refreshed for the first time, the view has changed. But when $scope.tds is assigned a value again, the view will no longer change.
But if the length of $scope.tds changes, the view will change. Why is this?

天蓬老师天蓬老师2840 days ago580

reply all(2)I'll reply

  • 習慣沉默

    習慣沉默2017-05-15 16:56:09

    First of all, I want to talk about two naming issues in the code:

    1. "td in td"是什么鬼，Angular居然也可以正确地执行。建议区别这两个名称，比如改成td in tds.
    2. a和b这样命名确实可以，不过写控制器时是不是经常要想一想a是什么？哦，是$scope。为何不直接命名为$scope.

    Okay, without further ado, let’s answer your questions. When a.td = [], a.td refers to another array, and the original array remains unchanged. The original array is bound in the template. a.td = []的时候，a.td引用了另外一个数组，原有数组并未改变。而模板中绑定的是原有数组。这确实是AngularJS的一个坑，但你最好用push、pop、spliceThis is indeed a pitfall of AngularJS

    , but you'd better use push, pop, splice, etc. to operate the array, if you want to replace For the entire array, I suggest you do it like this: 

    javascripta.td.splice(0, a.td.length, {tid:"111", created:"222"}, {tid:"333", created:"444"});

    For more detailed data binding mechanism and update process of AngularJS, please refer to this article:

    http://harttle.github.io/2015/06/06/angular-data-binding-and-digest.ht.. .🎜

    reply
    0
  • 習慣沉默

    習慣沉默2017-05-15 16:56:09

    javascript<body ng-app="scopeExample">


<p ng-controller="MyController">
    <p>
      <table>
    <tr ng-repeat="td in tds">
        <td>{{td.tid}}</td>
        <td>{{td.created}}</td>
        <td><button type="button" class="btn btn-primary btn-sm" data-tid="{{td.tid}}" ng-click="detail($event)">查看</button></td>
    </tr>
    </table>
    <button ng-click="change()">button</button>
</p>
</p>


</body>

sdApp.controller('MyController', ['$scope', function($scope) {
    $scope.change = function(){
       $scope.tds = [{tid:"321", created:"456"}, {tid:"abc", created:"def"}];
    };
}]);

    Try it out
    http://plnkr.co/edit/6tNYE0boiI6CXdKtckpa?p=preview

    reply
    0
  • Cancelreply