Question

我从后端部分获取数据并将其写入变量。然后我使用ng-repeat并将数据打印到我的视图中。当我的视图和组件加载并且数据成功打印时，我想添加一个新元素。但是当我将一个元素写入变量时，由于某种原因它无法在我的视图中反映出来。这是我的组成部分：

var pl = angular.module('phoneList');

pl.controller('ListCtrl', function ($scope, $http) {

$http.get('bookslist').then(function (response) {
    $scope.phones = response.data;   // GETTING DATA
});


$scope.addNew = function (answerForm) { // ADD NEW ELEMENT 
    if(answerForm.$valid){

        var book = {  
            name: $scope.name,
            author: $scope.author,
            publish_year: $scope.publish_year,
            description: $scope.description
        };

         $scope.phones.push(book); // Adding an element to the end of object. It's will be add but I can't to show it in a view

        $http.post('addbook', book).then(function (response) { // SAVE DATA 
            $scope.errors = response.data;  
        });
        $http.get('bookslist').then(function (response) {  // Tried to get all data one more time, but it's also doesn't work:( 
            $scope.phones = response.data;
        });
    }
};
});

这是我的观看文件

<div class="col-md-9 col-md-offset-2">

        <ul class="phones"">
            <div class="row" ng-controller="ListCtrl">
                <li ng-repeat="phone in phones | filter:$ctrl.query | orderBy:$ctrl.orderProp"
                    class="thumbnail">
                    <div class="col-md-12">

                        <a href="#!/phones/{{phone.id}}" class="thumb">
                            <img ng-src="{{phone.author}}" alt="{{phone.name}}"/>
                        </a>
                        <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>

                        <p>{{phone.description}}</p>
                        <p style="color:gray;">Publish date: {{phone.publish_year}}</p>
                        <div class="col-md-4 col-md-offset-9" style="position:relative; bottom: 70px;">
                            <a href="#!/edit/{{phone.id}}">
                                <button class="btn btn-info" style="display: inline-block">Edit</button>
                            </a>
                            <a href="" ng-click="removeBook(phone.id)" ng-controller="ListCtrl">
                                <button class="btn btn-danger" style="display: inline-block">Delete</button>
                            </a>
                        </div>
                    </div>
                </li>
            </div>
        </ul>
    </div>

所以在我第一次获得数据时，如果我删除或添加新元素，那么数据就不会更新。我该如何解决？谢谢！

Answer 1

这是因为Promisse不等待执行，试试这个

pl.controller('ListCtrl', function ($scope, $http) {

$http.get('bookslist').then(function (response) {
    $scope.phones = response.data;   // GETTING DATA
});


$scope.addNew = function (answerForm) { // ADD NEW ELEMENT 
    if(answerForm.$valid){

        var book = {  
            name: $scope.name,
            author: $scope.author,
            publish_year: $scope.publish_year,
            description: $scope.description
        };

         $scope.phones.push(book); // Adding an element to the end of object. It's will be add but I can't to show it in a view

        $http.post('addbook', book).then(function (response) { // SAVE DATA 
            $scope.errors = response.data;
            $http.get('bookslist').then(function (response) {  // Tried to get all data one more time, but it's also doesn't work:( 
              $scope.phones = response.data;
            });
        });
    }
};
});

Answer 2

Its happening because the view still contains the old reference. Please use angular.extend for the proper reference update. Check the updated code below:

var pl = angular.module('phoneList');

pl.controller('ListCtrl', function ($scope, $http) {
$scope.phones = [];
$http.get('bookslist').then(function (response) {
    $scope.phones.length = 0;
    angular.extend($scope.phones, response.data);// GETTING DATA
});


$scope.addNew = function (answerForm) { // ADD NEW ELEMENT 
    if(answerForm.$valid){

        var book = {  
            name: $scope.name,
            author: $scope.author,
            publish_year: $scope.publish_year,
            description: $scope.description
        };
        var tmpObj = {};
        $scope.phones.push(book); // Adding an element to the end of object. It's will be add but I can't to show it in a view
        angular.extend(tmpObj, $scope.phones);
        $scope.phones.length = 0;
        angular.extend($scope.phones, tmpObj);

        $http.post('addbook', book).then(function (response) { // SAVE DATA 
            $scope.errors = response.data;  
        });
        $http.get('bookslist').then(function (response) {  // Tried to get all data one more time, but it's also doesn't work:( 
            $scope.phones.length = 0;
            angular.extend($scope.phones, response.data);
        });
    }
};
});

Answer 3

我在这个视图上浪费了两天没有更新模型更改错误... 从现在开始，像这样初始化所有范围变量

 $scope.data = {};
 $scope.data.phones = null;

使用数据时

 $scope.data.phones = response.data;

然后在视图中使用$ scope.data.phones。并在更新更新时

 $scope.data.phones.push(book);

这将有效

更新视图中的数据

3 个答案: