Karthik Yeruva Karthik Yeruva - 1 month ago 6
AngularJS Question

Handling the multiple select statement in an ng-repeat div

<div class="row" ng-repeat="data1 in data.results ">
<div class="col" >{{$index}}</div>
<div class="col">{{data1.item_name}}</div>
<div class="col">
<select ng-model = "value" ng-change = "callUsers(value)">
<option value = "" selected>Choose a process</option>
<option ng-repeat='proces in data.process' >{{proces.name}}</option>
</select>

</div>
<div class="col">
<select ng-model = "value1" ng-change = "selectedEmployee(value1)">
<option value = "" selected>Select User</option>
<option value ="" ng-repeat='employee in employeeList' >{{employee.firstName}}</option>
</select>

</div>
</div>


Controller code:

$scope.callUsers = function(code){
for(var i=0; i<$scope.data.process.length; i++){
if($scope.data.process[i].name == code){
var param = {
'process' : $scope.data.process[i].code
}

AssignOrderService.getEmployees(param)
.success(function(data) {
$ionicLoading.hide();
if(data.length>0){
$scope.employeeList = data;
}

}).error(function(data) {
$ionicLoading.hide();
});

}
}
}
$scope.selectedEmployee = function (employee){
var myIsolatedEmployee = angular.copy(employee);
console.log(myIsolatedEmployee);
}


When I change any process I'm getting the List of employees and showing it through the employeeList.

But the problem here is, as there are many select statement within employeeList scope, when I change one select option value of the process, employeeList is automatically updating.

How to handle this?

Thanks

Answer

The problem is that your are not isolating the employee list as you should. Therefore, you must declare the list and stuff inside it's context (i.e. data1) and it should work fine.

On the html you must add data1 to identify the context like ng-change="callUsers(value, data1)". Also, now you must iterate the employee list from the data1 which is isolated now like ng-repeat='employee in data1.employeeList'.

<div class="row" ng-repeat="data1 in data.results ">
   <div class="col" >{{$index}}</div>
   <div class="col">{{data1.item_name}}</div>
   <div class="col">
      <select ng-model="value" ng-change="callUsers(value, data1)">
         <option value="" selected>Choose a process</option>
         <option ng-repeat='proces in data.process' >{{proces.name}}</option>
      </select>
   </div>
   <div class="col">
      <select ng-model = "data1.value1" ng-change="selectedEmployee(value1)">
         <option value = "" selected>Select User</option>
         <option value ="" ng-repeat='employee in data1.employeeList' >{{employee.firstName}}</option>
      </select>
   </div>
</div>

And on the controller, instead of binding the employee list to the main scope, you bind it to the data1 which is the isolated context of your loop.

$scope.callUsers = function (code, data1) {
    //$scope.employeeList = [];
    for (var i = 0; i < $scope.data.process.length; i++) {

        if ($scope.data.process[i].name == code) {
            var param = {
                'process': $scope.data.process[i].code

            }

            AssignOrderService.getEmployees(param)
                .success(function (data) {
                    $ionicLoading.hide();

                    console.log(data);
                    if (data.length > 0) {
                        data1.employeeList = data;
                    }

                }).error(function (data) {
                    $ionicLoading.hide();
                });   
        }
    }   
}
Comments