使用ng-repeat生成选择选项（带有演示）

Question

控制器：

$scope.send_index = function(event, val){ 
    console.log(val);
    $scope.variable = 'vm.areas['+val+'].name';
    console.log( $scope.variable ); 
};

这是在视图中：

<select ng-model="vm.areas">
    <option ng-repeat="area in vm.areas"  ng-value="area" id="{{area}}" ng-click="send_index($event, $index)">{{area.name}}
</select>
<input value="{{variable}}">

其中“ vm”是我的模型。

表达式内部的表达式（角度）

我的问题是我需要拥有一个{{array []}}，并将索引作为另一个表达式，

例如：{{Array [{{val}}]}}。

已经尝试过：

 $scope.variable = ''+'vm.areas['+val+'].name'+'';

问题在于视图中，“变量”显示为字符串

（vm.areas [0] .name）

它没有得到那个查询的勇气。

Answer 1

这是不正确的使用方法ng-model与<select>在AngularJS元素：

<!-- ERRONEOUS
<select ng-model="vm.areas">
    <option ng-repeat="area in vm.areas"  ng-value="area" id="{{area}}" ng-click="send_index($event, $index)">{{area.name}}
</select>

<input value="{{variable}}">
-->

无需使用该ng- click指令。该选择指令自动处理这一点。该ng- model指令接收或设置所选选项。

看到：

• 使用ng-repeat生成select选项
• 使用select ng-options和设置默认值

angular.module('ngrepeatSelect', [])

  .controller('ExampleController', ['$scope', function($scope) {

    $scope.data = {

     model: null,

     availableOptions: [

       {id: '1', name: 'Option A'},

       {id: '2', name: 'Option B'},

       {id: '3', name: 'Option C'}

     ]

    };

 }]);


<script src="https://unpkg.com/angular/angular.js"></script>

<div ng-app="ngrepeatSelect">

  <div ng-controller="ExampleController">

  <form name="myForm">

    <label for="repeatSelect"> Repeat select: </label>

    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">

      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>

    </select>

  </form>

  <hr>

  <tt>model = {{data.model}}</tt><br/>

</div>