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>

点击编辑按钮后，会出现一个下拉列表，其中包含e，g Delhi，Pune，London等州的列表，

<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包含数据库中的id。我从标签中删除了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>

控制器代码：

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中添加了相同的代码供您参考。

在angularJs下拉列表中选择的标签值

1 个答案: