Question

我无法将默认值绑定到ng-option。我已经搜索了我的问题的答案，但似乎找不到答案。

我的问题是我有3个级联selects和一个模型。

默认值

vm.roomData.branch = 'Lucena';
vm.roomData.building = 'mhq';
vm.roomData.roomFloor = '3rd Floor';

HTML

<div class="col-md-4">
    <label for="branch">
        <strong>Branch</strong>
    </label>
    <select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
    </select>
    <small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
    <label for="building">
        <strong>Building</strong>
    </label>
    <select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
    </select>
</div>
<div class="col-md-4">
    <label for="roomFloor">
        <strong>Room Floor</strong>
    </label>
    <select ng-options="loc.floors as loc for loc in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
    </select>
</div>

vm.locations数据

[
{
    "_id": "5a681380b7c41e7df2076819",
    "branch": "Lucena",
    "__v": 0,
    "building": [
        {
            "name": "MHQ",
            "floors": [
                "Ground Floor",
                "2nd Floor",
                "3rd Floor"
            ]
        }
    ],
    "dateCreated": "2018-01-24T05:02:56.465Z"
},
{
    "_id": "5a681aecb7c41e7df207681d",
    "branch": "Lucban",
    "__v": 0,
    "building": [
        {
            "name": "MHQ1",
            "floors": [
                "ground floor",
                "2nd floor"
            ]
        }
    ],
    "dateCreated": "2018-01-24T05:34:36.775Z"
}]

Answer 1

尝试初始化这样的默认值，

   $scope.roomData.branch = $scope.locations.find((loc) => loc.branch === 'Lucena'); 
   $scope.roomData.building = $scope.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
   $scope.roomData.roomFloor = '3rd Floor' ;

喜欢

＆＃13;

var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
  var vm = this;
  vm.roomData = {};
  vm.locations = [{
      "_id": "5a681380b7c41e7df2076819",
      "branch": "Lucena",
      "__v": 0,
      "building": [{
        "name": "MHQ",
        "floors": [
          "Ground Floor",
          "2nd Floor",
          "3rd Floor"
        ]
      }],
      "dateCreated": "2018-01-24T05:02:56.465Z"
    },
    {
      "_id": "5a681aecb7c41e7df207681d",
      "branch": "Lucban",
      "__v": 0,
      "building": [{
        "name": "MHQ1",
        "floors": [
          "ground floor",
          "2nd floor"
        ]
      }],
      "dateCreated": "2018-01-24T05:34:36.775Z"
    }
  ];

  vm.roomData.branch = vm.locations.find((loc) => loc.branch === 'Lucena'); debugger
  vm.roomData.building = vm.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
  vm.roomData.roomFloor = '3rd Floor' ;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp" ng-controller="testCtrl as vm">
  <div class="col-md-4">
    <label for="branch">
        <strong>Branch</strong>
    </label>
    <select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
    </select>
    <small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
    <label for="building">
        <strong>Building</strong>
    </label>
    <select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
    </select>
</div>
<div class="col-md-4">
    <label for="roomFloor">
        <strong>Room Floor</strong>
    </label>
    <select ng-options="o as o for o in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
    </select>
</div>
</body>

＆＃13;

ng-option在Angularjs

1 个答案: