Question

我有以下app.js：

var app = angular.module('app', ['ui.router']);
    angular
        .module('app')
        .config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider,$stateProvider) {
            $urlRouterProvider.otherwise('/');

            $stateProvider
             .state('home', {
                url: '/',
                templateUrl: 'templates/home.html',
                controller: 'homeCtrl',
                resolve: {
                    friends: ['$http', function($http) {
                         return $http.get('http://localhost:9000/ip').then(function(response) {
                            return response.data;
                        })
                    }]
                }
             })

我有以下控制器homeCtrl.js：

angular
.module('app')
.controller('homeCtrl', ['$scope', 'friends', '$http', function($scope, friends, $http) {

    $scope.friends = friends;
    $scope.audit = function(auditDate, id){
        $http.get('http://westeros:9000/ip/' + id + '/' + auditDate).success(function(data, status, headers, config){
            $scope.friends = data;
        });
    }
}]);

这是我的模板home.html：

<ul>
  <li ng-repeat="friend in friends">
        <span ng-repeat="(key, value) in friend.aktuell">
            <input type="text" ng-model="friend.aktuell[key]">
        </span>
      <button ng-click="audit(auditDate, friend._id)" class="btn btn-info">Audit</button>
  </li>
</ul>

现在，如果我在前端选择一个日期并点击＆＃34; audit＆＃34;，控制器从我的API中获取数据效果很好，但我希望视图会自动更新。我怎样才能做到这一点？

更新

我认为我发现了问题：我只向朋友模型的一部分提供{...}，但视图需要将多部分数组作为[{..},{..}]之类的朋友。知道如何只更新该特定行<li>吗？我的意思是在控制器中甚至可以这样：

 $scope.friend.aktuell[key] = data;

Answer 1

试试这个

.controller('homeCtrl', function($scope, friends, $http) {

$scope.friends = friends;
$scope.audit = function(auditDate, id){
    $http.get('http://westeros:9000/ip/' + id + '/' + auditDate).success(function(data, status, headers, config){
     $scope.$apply(function () {
        $scope.friends = data;
        }
    }
});

了解更多信息，请参阅此http://www.sitepoint.com/understanding-angulars-apply-digest/

Answer 2

你可以在$ scope.friends = data之后添加$ scope。$ apply（），这将强制数据绑定更新。

Answer 3

.controller('homeCtrl', function($scope, $http) { //<--here
    $scope.friends = [];
    $scope.audit = function(auditDate, id){
        $http.get('http://westeros:9000/ip/' + id + '/' + auditDate, {}).success(function(data, status, headers, config){
            $scope.friends = data;
        }
    }

Angular.js：http.get之后的数据绑定输入字段

3 个答案: