Значение метки, выбранное в выпадающем списке angularJs

Question

У меня была метка, содержащая значение user.Rules, например. Лондон

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

После нажатия на кнопку редактирования выпадающий список появляется, содержащий список состояний е, г Дели, Пуна, Лондон и т.д.,

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

Мне нужно установить выбранное значение в качестве значение метки выпадающего списка, т.е. Лондон

Как я могу это сделать?

Answer 1

Поскольку код образца отсутствует и данные образца для nestedList недоступны, поэтому я принимаю данные как свои собственные и создавал этот образец.

Я считаю, что $scope.RuleId содержит идентификатор из базы данных. Я удалил ng-model="user.Rules" с ярлыка и на основании $scope.RuleId нашел его эквивалентное значение.

HTML код:

<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 Код:

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

Тот же код добавляется в Working Sample для справки.