Question

我总共有4个投影。两个下拉列表（ddl）使用相同的$ scope，另外两个使用相同的$ scope。现在的问题是，当我更改第一个ddl值时，它会自动更改第二个ddl值（我不想这样，我仍然想要使用相同的$ scope）。是否可以使用相同的$ scope并且仍然两个ddls单独工作???

这是我的代码。

<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>

我的.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);
                    }
                })
  } ;
  }

请检查这个小提琴。 http://jsfiddle.net/ZwwH7/4/

Answer 1

在第1和第3选择框中使用不同的模型

<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>

First Dropdown选择使用相同的$ scope更改第二个下拉选择

1 个答案: