1

我有一个包含值的标签，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>

我需要将所选值设置为下拉列表的标签值，即伦敦

我怎样才能做到这一点 ？

4

1 回答 1

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

工作示例中添加了相同的代码供您参考。

于 2015-05-18T09:51:21.873 回答