使用ng-repeat生成选择选项(带有演示) [英] Using ng-repeat to generate select options (with Demo)
问题描述
$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"是我的模型.
where "vm" is my model.
我的问题是我需要拥有一个{{array []}},并将索引作为另一个表达式
my problem is that i need to have an {{array[]}}, with the index as another expression,
例如:{{Array [{{val}}]}}.
e.g: {{Array[{{val}}]}}.
已经尝试过:
$scope.variable = ''+'vm.areas['+val+'].name'+'';
问题出在视图中,变量"显示为字符串
The problem is in the view, "variable" is shown like an string
(vm.areas [0] .name)
(vm.areas[0].name)
它并没有得到该查询的价值.
and it donst get the valor of that query.
推荐答案
这不是在AngularJS中将ng-model
与<select>
元素一起使用的正确方法:
This is not the correct way to use ng-model
with a <select>
element in 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
指令. select指令自动处理该问题. ng-model
指令接收或设置所选的选项.
There is no need to use the ng-click
directive. The select directive handles that automatically. The ng-model
directive receives or sets the chosen option.
请参阅:
- Using
ng-repeat
to generateselect
options - Using select with
ng-options
and setting a default value
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>
这篇关于使用ng-repeat生成选择选项(带有演示)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!