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

参照用に、 Working Sampleに同じコードが追加されています。

于 2015-05-18T09:51:21.873 に答える