how to bind the values of two different arrays with each other in angular js

Question

hi i'm going to manage the user access levels with angular js and json. i have two arrays one for menu structure and the other for access levels.

current access levels :

    $scope.current_access_levels ={
      "can_home":{"title":"home","value":true},
      "can_mail":{"title":"mail","value":false}
    };

menu structure :

    $scope.menu = [
      {"id":"1","name":"home","aclvl":"can_home"},
      {"id":"2","name":"mail","aclvl":"can_mail"}
    ];

every menu field has an "aclvl" that matches with the names of objects in "current_access_level" array.

what i'm going to do is something like this :

<div ng-app="app" ng-controller="appCtrl">
      <div  ng-repeat="aclvl in current_access_levels">
        <label>{{aclvl.title}}</label><input type="checkbox" value="1" ng-model="aclvl.value"/>
      </div>
      <br />
      <br />
      <ul>
        <li ng-repeat="men in menu">
          <input type="checkbox" ng-model="current_access_levels.(men.aclvl).value"/>{{men.aclvl}}
        </li>
      </ul>
   </div>

for example if the "aclvl" of "men" is equal to "can_home" the checkbox value should be equal to "aclvl.can_home.value". any body knows how should i handle this!? i have added a fiddle to clear what i'm supposing to do. thanks

angular.module('app',[])
  .controller('appCtrl',function($scope){
  
    $scope.current_access_levels ={"can_home":{"title":"home","value":true},"can_mail":{"title":"mail","value":false}};

    $scope.menu = [{"id":"1","name":"home","aclvl":"can_home"},{"id":"2","name":"mail","aclvl":"can_mail"}];
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="appCtrl">
  <!-- current access levels -->
  <p>current access levels</p>
  <div  ng-repeat="aclvl in current_access_levels">
    <label>{{aclvl.title}}</label><input type="checkbox" value="1" ng-model="aclvl.value"/>
  </div>
  <!-- current access levels -->
  <br />
    <div>{{current_access_levels}}</div>
  <br />
  <hr>
  <!-- menu structure just for example -->
  <p>menu structure</p>
  <ul>
    <li ng-repeat="men in menu">
      <input type="checkbox" ng-model="current_access_levels.can_home.value"/>{{men.aclvl}}
    </li>
  </ul>
  <!-- menu structure just for example -->
  
</div>

<li ng-repeat="men in menu"> <input type="checkbox" ng-model="current_access_levels.can_home.value"/>{{men.aclvl}} </li> You have two checkboxes bound to the same model (they both reference the same variable) — Jakub Jankowski
– Jakub Jankowski, Commented Sep 1, 2016 at 11:50
tnx for your answer, i know that. it's an example to show what i'm going to do. i want to do it with the "ng-repeat" for each field of menu. each field of menu has a "ac_lvl" that should be in "current_access_levels.here.value" — saleh asadi
– saleh asadi, Commented Sep 1, 2016 at 11:57
thanks for Shailendra Singh Deol answer. that's the correct way of do it and it's working now. — saleh asadi
– saleh asadi, Commented Sep 1, 2016 at 12:19

Shailendra Singh Deol · Accepted Answer · 2016-09-01 12:08:18Z

2

You can use [] with current_access_levels it like as -

 <li ng-repeat="men in menu">
      <input type="checkbox" ng-model="current_access_levels[men.aclvl].value"/>{{men.aclvl}}
    </li>

answered Sep 1, 2016 at 12:08

Shailendra Singh Deol

6373 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

saleh asadi Over a year ago

thank you very much it works like a charm now. i can't vote right now cause of my reputation. excuse me.

Collectives™ on Stack Overflow

how to bind the values of two different arrays with each other in angular js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related