NG-选项

我尝试使用 ng-init 或在控制器中进行设置，但它似乎与ng-options的工作方式不兼容。

<select
    ng-init = "vm.index = 1"
    ng-model = "vm.index"
    ng-options= "index as item.name for (index, item) in vm.items">
</select>`

＆＃13;

angular.module('app', [

  ])
  .controller('appCtrl', appCtrl);

function appCtrl() {
  var vm = this;
  //vm.selected = 3;
  vm.items = [{
    id: 1000,
    name: "item1",
    someArray: [{
      id: 0,
      name: "item1 - subItem1"
    }, {
      id: 1,
      name: "item1 - subItem2"
    }, {
      id: 2,
      name: "item1 - subItem3"
    }, {
      id: 3,
      name: "item1 - subItem4"
    }, {
      id: 4,
      name: "item1 - subItem5"
    }]

  }, {
    id: 1001,
    name: "item2",
    someArray: [{
      id: 0,
      name: "item2 - subItem1"
    }, {
      id: 1,
      name: "item2 - subItem2"
    }, {
      id: 2,
      name: "item2 - subItem3"
    }, {
      id: 3,
      name: "item2 - subItem4"
    }, {
      id: 4,
      name: "item2 - subItem5"
    }]
  }, {
    id: 1002,
    name: "item3",
    someArray: [{
      id: 0,
      name: "item3 - subItem1"
    }, {
      id: 1,
      name: "item3 - subItem2"
    }, {
      id: 2,
      name: "item3 - subItem3"
    }, {
      id: 3,
      name: "item3 - subItem4"
    }, {
      id: 4,
      name: "item3 - subItem5"
    }]
  }];
}

＆＃13;

.div1 {
  display: inline-block;
  width: 40%
}

.div2 {
  display: inline-block;
  width 40%;
  vertical-align: top;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>

<body ng-app="app" ng-controller="appCtrl as vm">
  <div class="div1">

    <select ng-init="vm.selected = 1" ng-model="vm.selected" ng-options="index as item.name for (index, item) in vm.items track by item.id">
    </select>
    <h4>Index</h4>
    <pre ng-bind="vm.selected"></pre>
    <h4>Object</h4>
    <pre> {{ vm.items[vm.selected] | json }}</pre>
  </div>
  <div class="div2">
    <h3>subItems of index {{ vm.selected }}</h3>
    <ul>
      <li ng-repeat="subItem in vm.items[vm.selected].someArray track by subItem.id">
        {{ subItem.name }}
      </li>
    </ul>
  </div>
</body>

＆＃13;

更新

感谢您的解决方案。我有一些额外的背景要添加到这个问题。

我的实际用例是一个对象数组，每个对象都有一个数组属性。所选对象的数组属性为ng-repeated。

我想看看是否有任何工作解决方案来获取数组的索引，然后使用所选索引而不是实际对象进行下一次ng-repeat。这是为了让我的应用程序更高效。

如果你能说服我使用ng-model来获取所选对象，那么移动设备上的任何内容都不会受到性能损失，那么我也很乐意接受这个答案。

Answer 1

问题是，当您实际拥有数组时，您正在使用对象重复语法。将其更改为使用数组语法！

reactJS

然后将模型设置为您想要的项目：

<select
    ng-init = "vm.selectedItem = vm.items[1]"
    ng-model = "vm.selectedItem"
    ng-options= "item as item.name for item in vm.items">
</select>

使用

var randomIndex = 2;
vm.selectedItem = vm.items[randomIndex];

时，

$index也不存在

Answer 2

要在选择HTML标记中选择特定选项，您必须将整个对象分配给ng-model而不是仅指定索引。

HTML示例（它将从数组中选择第一项）：

ng-init = "vm.selected = vm.items[0]"

控制器示例（它将选择数组中的最后一项）：

angular.module('app', []).controller('appCtrl', appCtrl);
function appCtrl() {
    var vm = this;
    vm.items= [{
        id: 1000,
        name: "item1"
    }, {
        id: 1001,
        name: "item2"  
    }, {
        id:1002,
        name: "item3"
    }];
    vm.selected = vm.items[vm.items.length - 1];
}

在ng-options中，是否可以使用vm.items中的＆＃34;（index，item）进行预选＆＃34;语法

NG-选项

更新

2 个答案: