CODEWITHSUNDEEP
htmlangularjs
Anurag Mishra
Anurag Mishra

Reputation: 103

Use ngRepeat twice within select tag

I have used the below code:

<div class="col-lg-3">
   <select ng-model="userportal.data.owner_id" class="form-control uniformselect" id="owner_id" style="border-radius: 4px;">
      <option value="" id=""> Select Device </option>
      <option ng-repeat="device in deviceStatus" value="{{device.device_id}}">
           <span ng-repeat="user in userFilter">
                <span ng-if="{{user.id}} == {{device.device_id}}">
                    {{user.name}}&nbsp;{{device.device_id}}
                <span/>
           </span>
      </option>
  </select>
</div>

I got the value of {{device.device_id}} but,I didn't get the value of {{user.id}} and {{user.name}}. Can anyone help me to resolve this problem. How can I get these values here.

Upvotes: 2

Views: 455

Answers (1)

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20751

Try out this code

Working Demo

script

   var myApp = angular.module('myApp', []);
myApp.controller('Controller', function ($scope) {
    $scope.userFilter = [{
        id: 1,
        name: 'ABC'
    }, {
        id: 2,
        name: 'LMN'
    }, {
        id: 3,
        name: 'OPQ'
    }, {
        id: 4,
        name: 'RST'
    }, {
        id: 5,
        name: 'UVW'
    }];
    $scope.deviceStatus = [{
        device_id: 1
    }, {
        device_id: 4
    }, {
        device_id: 5
    }];

    $scope.result = [];
    angular.forEach($scope.deviceStatus, function (deviceObj) {
        angular.forEach($scope.userFilter, function (userObj) {
            if (deviceObj.device_id == userObj.id) {
                var newObj = {};
                newObj.id = userObj.id;
                newObj.name = userObj.name;
                $scope.result.push(newObj);
            }
        });
    });
});

html

<div ng-app="myApp" ng-controller="Controller">
    <div class="col-lg-3">
        <select ng-model="userportal.data.owner_id" class="form-control uniformselect" id="owner_id" style="border-radius: 4px;">
            <option value="" id="">Select Device</option>
            <option ng-repeat="users in result" value="{{users.id}}">{{users.name}}&nbsp;{{users.id}}</option>
        </select>
    </div>
</div>

Upvotes: 1

Related Questions