1

私は次のコントローラーを持っています：

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。

4

1 に答える 1

2

これは、同じコントローラーを 2 回使用するためです。これにより、2 つの別個のスコープが作成されます。ユーザーを 1 つのスコープに追加すると、2 番目のスコープには追加されません。修正は簡単です。コードを 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>

サービスはシングルトンであるため、別のアプローチは Service を作成することです。

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;
  };
}

これは、元のマークアップで機能します。

于 2013-05-27T13:00:15.397 に答える