angularjs – 如何获取选择标签的ng模型以获得最初选择的选项？
|
我对Angular很新,所以我可能会对这一切都做错……
我有一个< select>类似如下： <select ng-model="mySelectedValue">
<option value="">--</option>
<option ng-repeat="myValue in someDynamicArrayOfValues" value="{{myValue}}" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(myValue)">{{myValue}}</option>
</select>
这大部分都有效…下拉列表最初会选择正确的选项,如果我更改了所选的选项,那么mySelectedValue将获得新的选择.但是,mySelectedValue不会获得最初选择的选项. mySelectedValue为空,直到我更改下拉列表中的值. 我查看了ng-init,但似乎在设置someDynamicArrayOfValues之前得到了评估… 有没有办法让mySelectedValue接收最初选择的<选项>？中的值？ 更新： 我试过这个： <div ng-show="someDynamicArrayOfValues">
<select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(arrayValue)">
<option value="">--</option>
</select>
</div>
还有这个： <div ng-show="someDynamicArrayOfValues">
<select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-init="myFunctionForSettingSelectedValue()">
<option value="">--</option>
</select>
</div>
但是这些都不起作用,因为在设置someDynamicArrayOfValues之前构建了select(并且ng-init和ng-selected都被评估),因此,在< select>之前.甚至可见.当使用< option ng-repeat =“...”>时,< select>在设置someDynamicArrayOfValues之后才会构建/初始化,这就是我一直朝那个方向发展的原因. 有没有办法让ng-options技术起作用,同时让select依赖于someDynamicArrayOfValues(如果ng-options是更好的方法)？ 更新2： 解决方法
我认为你将使用select标签的ng-options属性会很好.它是一个角度指令,可根据选项数组创建选项.你可以看看
select documentation
如果你使用你的代码 – 你的函数myFunctionForDeterminingWhetherValueIsSelected在初始化时为每个选项工作两次,在你选择另一个选项时为每个选项项工作一次. 使用您的代码演示：http://plnkr.co/edit/0IVNLHiw3jpz4zMKcB0P?p=preview 您可以在select指令的描述中看到select的演示. 更新 首先,要查看值何时更改 – 您需要使用select标记的ng-change属性,如下所示： <select ng-model="mySelectedValue" ng-options="myValue for myValue in someDynamicArrayOfValues" ng-change="myFunctionForDeterminingWhetherValueIsSelected()"> <option value="">--</option> </select> 然后,我不知道myFunctionForSettingSelectedValue是怎样的,但有2个变种： >此函数返回一些值 – 然后您需要使用ng-init下一个方法. 控制器： $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>
>在此函数中设置mySelectedValue的值 – 然后执行此操作. 控制器： $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> 我创建了一个实现使用ng-init的第一个版本的示例.选择新值时 – 将其打印到控制台. 此外,我将选项移动到options.json文件.所以选项在ajax请求完成后初始化.一切都很好. 演示：http://plnkr.co/edit/pzjxxTnboKJXJYBGcgNb?p=preview 更新2 再次问好.我认为您不需要根据您的要求提供任何ng-init.您可以在http请求完成时启动模型的值.另外我不明白为什么在这种情况下你需要ng-change功能. 以下是您需要修改的代码,其中加载选项后启动ng-models的值. 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>
演示：http://plnkr.co/edit/9Q1MH0esGE1SIJa0m2NV?p=preview （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |