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

Assign ng-model to checkbox if some value == anothervalue

本文关键字:ng-model 分配 复选框 则将 另一个 如果      更新时间:2023-09-26

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

在用户我有一个字段"default_account",我想把一个默认帐户的ID。用户可以有很多账户,但只有一个是默认的。当我转到帐户选项时,我有一个复选框,负责设置/取消默认帐户。

现在我想设置复选框开/关取决于它是默认的用户。我还需要分别改变default_account字段内的用户对象上的复选框更改。我很困惑我怎么能做这件事。

任何建议都是感激的!

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

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/

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

如果变量是true,方框将被选中。如果是false就不会。或者,表达式也可以工作,例如ng-checked="1===1"将计算为true。

如果您想根据用户单击复选框来更改其他内容,请在输入标记中设置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;
                            }
                        }
                    }    
            });

这是我的解决方案,完美地为我工作!

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