如何获取选择标签的 ng-model 以获取初始选择的选项? [英] How do I get the ng-model of a select tag to get the initially-selected option?
问题描述
我对 Angular 还很陌生，所以我可能把这一切都错了......
我有一个 <select>类似于以下内容:
这主要是有效的...下拉列表最初使用选择的正确选项呈现，如果我更改所选选项，则 mySelectedValue 将获得新选择.但是，mySelectedValue 没有获得 initially-selected 选项.mySelectedValue 为空，直到我更改下拉列表中的值.
我查看了 ng-init，但它似乎在 someDynamicArrayOfValues 设置之前得到了评估...
有没有办法让 mySelectedValue 接收初始选择的
更新:
我忘了提及我也尝试过使用 ng-options，但没有运气让它与确定选择的选项结合使用.
我已经试过了:
<select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(arrayValue)"><option value="">--</option></选择>还有这个:
<select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-init="myFunctionForSettingSelectedValue()"><option value="">--</option></选择>但这些都不起作用，因为选择是构建的(并且 ng-init 和 ng-selected 都被评估) before someDynamicArrayOfValues 已经设置，因此，在<选择>甚至可见.当使用 时，
有没有办法让 ng-options 技术起作用，同时让选择依赖于 someDynamicArrayOfValues(如果 ng-options 是更好的方法)?
更新 2:
这是一个 Plunker(根据 ababashka 的答案修改)，它更接近我最终想要实现的目标:http://plnkr.co/edit/Kj4xalhI28i5IU0hGBLL?p=preview.它还没有完成...我希望在设置 someDynamicArrayOfValues 后，将 3 个下拉列表中的每一个都设置为最匹配的动态值.
我认为使用 select 标签的 ng-options 属性会很好.这是一个角度指令，它根据选项数组创建选项.您可以查看选择文档
如果您使用您的代码 - 您的函数 myFunctionForDeterminingWhetherValueIsSelected 在初始化时为每个选项工作两次，当您选择另一个选项时为每个选项项目工作一次.
演示代码:http://plnkr.co/edit/0IVNLHiw3jpz4zMKcB0P?p=preview
选择演示，您可以在 select 指令的说明中看到.
更新
首先，要查看值何时更改 - 您需要使用 select 标签的 ng-change 属性，如下所示:
然后，我不知道 myFunctionForSettingSelectedValue 长什么样子，但有 2 个变体:
- 此函数返回一些值 - 那么接下来您需要使用
ng-init.
控制器:
$scope.someInitFunc = function () {返回一"；};HTML:
- 您在此函数中设置
mySelectedValue的值 - 然后执行此操作.
控制器:
$scope.someInitFunc = function () {$scope.mySelectedValue = '一';};HTML:
我创建了一个示例，它实现了使用 ng-init 的第一个版本.选择新值时 - 它会打印到控制台.
此外，我将选项移至 options.json 文件.所以选项在 ajax 请求完成后被初始化.一切正常.
更新 2
你好.根据您的要求，我认为您不需要任何 ng-init .您可以在 http 请求完成后启动模型的值.另外我不明白为什么在这种情况下你需要 ng-change 函数.
这是您需要从您的 plunk 中修改的代码，其中 ng-model 的值在加载选项后启动.
JavaScript:
.controller('MainCtrl', function($scope, $http) {$scope.someStaticArrayOfValues = ['一', '二', '三'];$scope.mySelectedValues = {};$http.get('options.json').then(功能(响应){$scope.someDynamicArrayOfValues = response.data;for (var i = 0; i < $scope.someStaticArrayOfValues.length; ++i) {$scope.someDynamicArrayOfValues.some(function (value) {if (value.substring(0, $scope.someStaticArrayOfValues[i].length) === $scope.someStaticArrayOfValues[i]) {$scope.mySelectedValues[$scope.someStaticArrayOfValues[i]] = value;返回真；}});}},功能(响应){console.log('错误！');});});HTML:
<p>你好{{name}}！</p><div ng-show="someDynamicArrayOfValues"><ul><li ng-repeat="staticValue in someStaticArrayOfValues">{{staticValue}} -<select ng-model="mySelectedValues[staticValue]"ng-options="myValue for myValue in someDynamicArrayOfValues"><option value="">--</option></选择>{{mySelectedValues[staticValue]}}
演示:http://plnkr.co/edit/9Q1MH0esGE1SIJa0m2NV?p=preview
I'm pretty new to Angular, so I may be going about this all wrong...
I have a <select> similar to the following:
<select ng-model="mySelectedValue">
<option value="">--</option>
<option ng-repeat="myValue in someDynamicArrayOfValues" value="{{myValue}}" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(myValue)">{{myValue}}</option>
</select>
This mostly works... The dropdown initially renders with the correct option selected, and if I change the selected option, then mySelectedValue will get the new selection. However, mySelectedValue does NOT get the initially-selected option. mySelectedValue is blank until I change the value in the dropdown.
I looked at ng-init, but that seems to get evaluated before someDynamicArrayOfValues is set...
Is there a way I can get mySelectedValue to receive the value in the initially-selected <option>?
UPDATE:
I forgot to mention that I had also tried using ng-options, but haven't had any luck getting that to work in conjunction with determining which option was selected.
I've tried this:
<div ng-show="someDynamicArrayOfValues">
<select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(arrayValue)">
<option value="">--</option>
</select>
</div>
and this:
<div ng-show="someDynamicArrayOfValues">
<select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-init="myFunctionForSettingSelectedValue()">
<option value="">--</option>
</select>
</div>
but neither of those work because the select is built (and ng-init and ng-selected both get evaluated) before someDynamicArrayOfValues has been set and, therefore, before the <select> is even visible. When using <option ng-repeat="...">, the <select> doesn't get built/initialized until after someDynamicArrayOfValues is set, which is why I had been going that direction.
Is there a way to get the ng-options technique to work while, at the same time, having the select dependent on someDynamicArrayOfValues (if ng-options is the better way to go)?
UPDATE 2:
Here's a Plunker (modified from ababashka's answer) that is a little closer to what I'm ultimately trying to achieve: http://plnkr.co/edit/Kj4xalhI28i5IU0hGBLL?p=preview. It's not quite there yet... I'd like it to have each of the 3 dropdowns set with the closest-matching dynamic value once someDynamicArrayOfValues is set.
I think that it will be good it you will use ng-options attribute of select tag. It's an angular directive which creates options according to Array of options. You can take a look at select documentation
If you use your code - your function myFunctionForDeterminingWhetherValueIsSelected works twice for every option at initialization and once for every option item when you select some another option.
Demo with your code: http://plnkr.co/edit/0IVNLHiw3jpz4zMKcB0P?p=preview
Demo for select you could see at description of select directive.
Update
At first, to see when value is changed - you need to use ng-change attribute of select tag, like this:
<select ng-model="mySelectedValue"
ng-options="myValue for myValue in someDynamicArrayOfValues"
ng-change="myFunctionForDeterminingWhetherValueIsSelected()">
<option value="">--</option>
</select>
Then, i don't know how does myFunctionForSettingSelectedValue look like, but there are 2 variants:
- This function returns some value - then you need to use
ng-initnext way.
Controller:
$scope.someInitFunc = function () {
return 'One';
};
HTML:
<select ng-model="mySelectedValue"
ng-options="myValue for myValue in someDynamicArrayOfValues"
ng-change="myFunctionForDeterminingWhetherValueIsSelected()"
ng-init="mySelectedValue = someInitFunc()">
<option value="">--</option>
</select>
- You set value of
mySelectedValuein this function - then you do this.
Controller:
$scope.someInitFunc = function () {
$scope.mySelectedValue = 'One';
};
HTML:
<select ng-model="mySelectedValue"
ng-options="myValue for myValue in someDynamicArrayOfValues"
ng-change="myFunctionForDeterminingWhetherValueIsSelected()"
ng-init="someInitFunc()">
<option value="">--</option>
</select>
I have created an example which implements the first version of using ng-init. When new value is selected - it's printed to console.
Also, i moved options to the options.json file. So options are initialized just after ajax request was finished. Everything works great.
Update 2
Hello again. I think you don't need to have any ng-init according to your requirements. You can just initiate values of your model when http request is finished. Also i don't understand why do you need ng-change function in this case.
Here is modified code you need from your plunk where values of ng-models are initiated after options are loaded.
JavaScript:
.controller('MainCtrl', function($scope, $http) {
$scope.someStaticArrayOfValues = ['One', 'Two', 'Three'];
$scope.mySelectedValues = {};
$http.get('options.json').then(
function (response) {
$scope.someDynamicArrayOfValues = response.data;
for (var i = 0; i < $scope.someStaticArrayOfValues.length; ++i) {
$scope.someDynamicArrayOfValues.some(function (value) {
if (value.substring(0, $scope.someStaticArrayOfValues[i].length) === $scope.someStaticArrayOfValues[i]) {
$scope.mySelectedValues[$scope.someStaticArrayOfValues[i]] = value;
return true;
}
});
}
},
function (response) {
console.log('ERROR!');
}
);
});
HTML:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-show="someDynamicArrayOfValues">
<ul>
<li ng-repeat="staticValue in someStaticArrayOfValues">
{{staticValue}} -
<select ng-model="mySelectedValues[staticValue]"
ng-options="myValue for myValue in someDynamicArrayOfValues">
<option value="">--</option>
</select>
<h2>{{mySelectedValues[staticValue]}}</h2>
</li>
</ul>
</div>
</body>
Demo: http://plnkr.co/edit/9Q1MH0esGE1SIJa0m2NV?p=preview
这篇关于如何获取选择标签的 ng-model 以获取初始选择的选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
