CODEWITHSUNDEEP
angularjs
micronyks
micronyks

Reputation: 55443

First Dropdown selection changes second dropdown selection using same $scope

I have total 4 dropdows. two dropdown(ddl)s use same $scope and other two use same $scope. Now problem is when I change first ddl value, it automatically changes second ddl value(I don't want that, still i want to use same $scope). is it possible to use same $scope and still both ddls work individually???

Here is my code.

<html ng-app>
 <div ng-controller="ctrl">
 <div>
        <select ng-model="m.roleId" ng-change="loadPersons(m.roleId)" ng-options="w.roleId as w.roleName for w in roles">
           <option value=""></option>
        </select>

         <select ng-model="m.contactId" ng-options="w.contactId as w.personName for w in personList">
            <option value=""></option>
        </select>

       <select ng-model="m.roleId" ng-change="loadPersons(m.roleId)" ng-options="w.roleId as w.roleName for w in roles">
         <option value=""></option>
        </select>


        <select ng-model="m.contactId" ng-options="w.contactId as w.personName for w in personList">
            <option value=""></option>
        </select>


    </div>
  </div>

 </html>

my .js

function ctrl($scope) {

  $scope.roles=[{ roleId:1, roleName:"Admin"},{roleId:2,roleName:"guest"}];
  $scope.persons = [{contactId: 1,roleId:1,personName: "Joy"},
                  {contactId: 2,roleId:1,personName: "Jack"},
                  {contactId: 3,roleId:1,personName: "Jonh"},
                  {contactId: 4,roleId:2,personName: "Gereth"}];
  $scope.click=function(data)
  {   console.log(data.roleId);
    console.log(data.contactId);
  }
 $scope.loadPersons=function(id)
  {
   $scope.personList=[];
   angular.forEach($scope.persons,function(person)
                {
                    if(person.roleId==id)
                    {
                        $scope.personList.push(person);
                    }
                })
  } ;
  }

please check this fiddle. http://jsfiddle.net/ZwwH7/4/

Upvotes: 0

Views: 2452

Answers (1)

vimal1083
vimal1083

Reputation: 8661

Use different model in 1st and 3rd selct box

<select ng-model="m.roleId1" ng-change="loadPersons(m.roleId1)" ng-options="w.roleId as w.roleName for w in roles">
       <option value=""></option>
    </select>

     <select ng-model="m.contactId" ng-options="w.contactId as w.personName for w in personList">
        <option value=""></option>
    </select>

   <select ng-model="m.roleId2" ng-change="loadPersons(m.roleId2)" ng-options="w.roleId as w.roleName for w in roles">
     <option value=""></option>
    </select>


    <select ng-model="m.contactId" ng-options="w.contactId as w.personName for w in personList">
        <option value=""></option>
    </select>

Upvotes: 3

Related Questions