2013-05-30 82 views
3

我在Angular控制器中有一個用戶對象。我也有一個Account對象的數組,每個對象都有相應的ID。如果某個值==另一個值,則將複選框分配給複選框

在用戶我有一個字段「default_account」,我想要把一個默認帳戶的ID。所以,用戶可以擁有很多帳戶,但只有其中一個帳戶可以是默認帳戶。當我進入賬戶選項時,我有一個複選框,它負責將賬戶設置/取消設置爲默認值。

現在我想設置複選框的開啓/關閉取決於它是用戶的默認值。我還需要在複選框更改時分別更改User對象內的default_account字段。它讓我很困惑,我該怎麼做。

任何建議表示讚賞!

+0

喜謝爾蓋,我給你我的回答工作提琴。 Dewd – dewd

+1

如果只有一個帳戶可以成爲默認帳戶,您可能需要用單選按鈕替換複選框。 – callmekatootie

回答

0

如果您想根據變量將複選框設置爲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; 
          } 
         } 
        }  
      }); 
+1

根據TS的要求,我相信用戶和賬戶是不同的實體,賬戶本身不應該知道它是否是默認的。 –

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/

+0

'account == user.default_account' - '$ scope.accounts'是一個對象數組。該對象將有很多屬性。這裏最理想的是將帳號存儲在用戶模型中,並將其與現有帳號進行比較。如果整個帳戶信息相同,則不需要進行比較。所以解決方案應該更多'account.account_number ==用戶。default_acount'而不是比較整個賬戶對象(或者甚至將整個賬戶對象存儲到用戶模型中)。 – callmekatootie

+0

@callmekatootie,好吧,這是由你來定義設計和邏輯的問題。 –

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> 

和角側只是這樣做:

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