Label value selected in angularJs drop down list

Question

I had a label containing value user.Rules e.g . London

<label id="ruleId" for="Rules" ng-model="user.Rules" ng-hide="editmode"
    style="width:97%; word-wrap:break-word; overflow-wrap:break-word;">{{user.Rules }}
</label>

After click on edit button a drop down list appears containing the list of states e,g Delhi, Pune, London etc.,

<select class="form-control" name="user.Rules" data-ng-model="user.Rules" ng-options="option for option in nestedList" ng-show="editmode" style="width:100%; ">
    <option value="" style="margin-left:25px">-Select Rule-</option>
</select>

I need to set the selected value as the label value of drop down list i.e. London

How can I do that ?

What is the propertyname of 'the option' that you want to display? Can you show us what nestedList looks like in your controller? — Robin-Hoodie
– Robin-Hoodie, Commented May 18, 2015 at 4:58
here's some example code using select and ng-options : link hope this helps. — Shehryar Abbasi
– Shehryar Abbasi, Commented May 18, 2015 at 5:05

Arulkumar · Accepted Answer · 2015-05-18 10:14:55Z

Since there is no sample code and sample data for nestedList is not available, so I assume the data as my own and created this sample.

I consider the $scope.RuleId contains the id from the database. I removed the ng-model="user.Rules" from the label and and based on the $scope.RuleId I find its equivalent value.

HTML Code:

<div ng-controller="MyCntrl">
    <label id="ruleId" for="Rules" ng-hide="editmode" 
    style="width:97%; word-wrap:break-word; overflow-wrap:break-word;">{{selectedLabel}}
    </label>
    <select class="form-control" name="ruleDetails" data-ng-model="RuleId"
        ng-options="option.RuleId as option.Rules for option in nestedList"
        ng-show="editmode" style="width: 100%;">
        <option value="" style="margin-left:25px">-Select Rule-</option>
    </select>
    <div style="height: 10px"></div>
    <div>
        <button ng-click="editButton()">Edit</button>
    </div>
</div>

Controller Code:

function MyCntrl($scope) {
  $scope.editmode = false;
  $scope.RuleId = "001";

  $scope.nestedList = [{
    "Rules": "London",
    "RuleId": "001"
  }, {
    "Rules": "Delhi",
    "RuleId": "002"
  }, {
    "Rules": "Pune",
    "RuleId": "003"
  }, {
    "Rules": "Mumbai",
    "RuleId": "004"
  }, {
    "Rules": "Chennai",
    "RuleId": "005"
  }];

  angular.forEach($scope.nestedList, function(rule) {
    if (rule.RuleId === $scope.RuleId) {
      $scope.selectedLabel = rule.Rules;
    }
  });

  $scope.editButton = function() {
    $scope.editmode = true;
  };
}

The same code is added in the Working Sample for your reference.

Collectives™ on Stack Overflow

Label value selected in angularJs drop down list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related