Question

我有以下控制器：

function userControl($scope,$http) {
    $scope.users = [
                        {"id":"0","name":"User1","roles":[{}]},
                        {"id":"1","name":"User2","roles":[{}]},
                    ]

    $scope.addUser = function() {
        var nextid = $scope.getNextId();
        $scope.users.push({id:nextid,name:$scope.userName});
        $scope.userName = '';
        //$apply();
    };

    $scope.getNextId = function() {
        var count = 0;
        angular.forEach($scope.users, function(data) {
          count = data.id;
        });
        var count2 = parseInt(count)+1;
        return count2;
     };

}

以下HTML：

    <h2>Users</h2>
    <div ng-controller="userControl">
    <div ng-repeat="user in users">
        {{user.id}} : {{user.name}}
    </div>
    <form ng-submit="addUser()">
        <input type="text" ng-model="userName" placeholder="User Name" />
        <input type="submit" value="add">
    </form>
    </div>

<h2>Add role to user</h2>
<div ng-controller="userControl">
    <div ng-repeat="user in users">
        <u>{{user.id}} : {{user.name}}</u><br />
        <div ng-repeat="role in user.roles">
            {{role.name}}
        </div>
        <br />
    </div>
    <form ng-submit="addRoleToUser()">
        <select ng-model="selectedUser" name="userSelect" ng-options="user.id as user.name for user in users"></select>
        <input type="submit" value="add">
    </form>
</div>

当我在addUser()函数中添加用户时，我可以看到用户已添加，因为它已在ng-repeat下列出，但用户名未出现在select框中。

Answer 1

这是因为您使用相同的控制器两次。这将创建两个单独的范围。在一个范围中添加用户时，不会在第二个范围中添加用户。修复很简单，将代码加入一个范围：

<div ng-controller="userControl">
    <h2>Users</h2>
    <div>
    <div ng-repeat="user in users">
        {{user.id}} : {{user.name}}
    </div>
    <form ng-submit="addUser()">
        <input type="text" ng-model="userName" placeholder="User Name" />
        <input type="submit" value="add">
    </form>
    </div>

<h2>Add role to user</h2>
<div>
    <div ng-repeat="user in users">
        <u>{{user.id}} : {{user.name}}</u><br />
        <div ng-repeat="role in user.roles">
            {{role.name}}
        </div>
        <br />
    </div>
    <form ng-submit="addRoleToUser()">
        <select ng-model="selectedUser" name="userSelect" ng-options="user.id as user.name for user in users"></select>
        <input type="submit" value="add">
    </form>
</div>
</div>

另一种方法是创建服务，因为服务是单身：

module.factory('Users',function(){
  var users = [
    {"id":"0","name":"User1","roles":[{}]},
    {"id":"1","name":"User2","roles":[{}]},
  ];

  return {
    users:users,
    add:function(user){
      users.push(user);
    }
  }
});

function userControl($scope, Users) {

  $scope.users = Users.users;

  $scope.addUser = function() {
    var nextid = $scope.getNextId();
    Users.add({id:nextid,name:$scope.userName});
    $scope.userName = '';
  };

  $scope.getNextId = function() {
    var count = 0;
    angular.forEach($scope.users, function(data) {
      count = data.id;
    });
    var count2 = parseInt(count)+1;
    return count2;
  };
}

这将与您的原始标记一起使用。

AngularJS在json推送后选择不更新

1 个答案: