如果某个值== anothervalue,则将ng-model分配给复选框

时间:2013-05-30 09:49:13

标签: javascript angularjs

我在Angular控制器中有一个User对象。我还有一个Account对象数组,每个对象都有相应的ID。

在用户中我有一个字段“default_account”,我想在其中输入默认帐户的ID。因此,用户可以拥有大量帐户,但其中只有一个可以是默认帐户。当我转到帐户选项时,我有一个复选框,负责设置/取消设置默认帐户。

现在我想根据用户的默认设置打开/关闭复选框。我还需要在复选框更改时分别更改User对象中的default_account字段。我非常困惑我如何做到这一点。

感谢任何建议!

3 个答案:

答案 0 :(得分:1)

非常近似(没有发短信):

HTML:

       <div ng-repeat="account in accounts">
           <input type="checkbox" ng-checked="account == user.default_acount" 
                  ng-click="SelectAssDefault(account )" />
        </div>

JS:

function MyCtrl($scope) {

  $scope.user = { name: 'user', default_acount: null};
  $scope.accounts = [{  }, {  }, ...];

  $scope.SelectAssDefault = function (account) {
      $scope.user.default_acount = account;
  };
}

编辑:一个有效的例子:http://jsfiddle.net/ev62U/120/

答案 1 :(得分:0)

如果要根据变量将复选框设置为true,可以在输入标记中设置ng-checked="variable"

如果变量为true,则会检查该框。如果它是false则不会。或者,表达式也可以用于例如ng-checked="1===1"将评估为真。

如果您想根据用户点击复选框更改其他内容,请在输入标记内设置ng-click="someCtrlFunction()"。这将调用控制器中的函数。如果已绑定,可以从控制器中查找复选框的值。

这是一个小提琴:http://jsfiddle.net/E8LBV/10/,这里是代码:

HTML

<div ng-app="App">
<div ng-controller="AppCtrl">
    <ul>
        <li ng-repeat="user in users">{{user.name}}
            <ul>
                <li ng-repeat="account in user.accounts">
                    <input type="checkbox" ng-model="checked" ng-checked="account == user.default" ng-click="changeDefault(user.id,account,checked)">{{account}}</input>
                </li>
                <ul/>
        </li>
    </ul>
</div>
</div>

JS

            var app = angular.module('App', []);

            app.service('Users', function () {
                var Users = {};

                Users.data = [{
                    'id': 1,
                        'name': 'jon',
                        'default': null
                }, {
                    'id': 2,
                        'name': 'pete',
                        'default': null
                }];

                return Users;

            });

            app.service('Accounts', function () {
                var Accounts = {};

                Accounts.data = [{
                    'user': 1,
                        'ac': 123456
                }, {
                    'user': 2,
                        'ac': 456832
                }, {
                    'user': 2,
                        'ac': 345632
                }, {
                    'user': 1,
                        'ac': 677456
                }];

                return Accounts;

            });

            app.controller('AppCtrl', function ($scope, Users, Accounts) {
                $scope.users = Users.data;

                //attach accounts to user                
                for (i = 0; i < $scope.users.length; i++) {
                    $scope.users[i].accounts = [];
                    for (ii = 0; ii < Accounts.data.length; ii++) {
                        if (Accounts.data[ii].user == $scope.users[i].id) {
                            $scope.users[i].accounts.push(Accounts.data[ii].ac);
                        }
                    }
                }

                    //function to change the default account for the user
                    $scope.changeDefault = function (id, account, checked) {
                        if (!checked) {
                            return;
                        }
                        for (i = 0; i < $scope.users.length; i++) {
                            if ($scope.users[i].id == id) {
                                $scope.users[i].
                                default = account;
                            }
                        }
                    }    
            });

答案 2 :(得分:0)

这是我的解决方案,对我来说非常有用!

<tbody ng-repeat="account in accounts">
          <tr>
            <td ><a ng-click="getloandetails(account.idAccount)">{{account.accountName}}</a></td>
            <td>$ {{account.currentBalance}}</td>
          </tr>
</tbody>

并且在Angular方面只需这样做:

$scope.getloandetails = function(accountId) {
    alert('Gettring details for the accountId: ' + accountId);
};