Tro*_*roy 5 angularjs angular-ngmodel
我对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在最初选择的<option>中获得值？
更新:
我忘了提到我还尝试过使用ng-options,但是没有任何运气可以与确定选择了哪个选项一起工作.
我试过这个:
<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>
但无论这些工作,因为选择是建立(和NG-init和NG-选择都得到评估)之前 someDynamicArrayOfValues已经设置的,因此,在<选择>是偶可见.使用时<option ng-repeat="...">,<select>直到设置完后 someDynamicArrayOfValues才会生成/初始化,这就是我一直朝这个方向发展的原因.
有没有办法让ng-options技术工作,同时,选择依赖于someDynamicArrayOfValues(如果ng-options是更好的方法)？
更新2:
这是一个Plunker(从ababashka的答案修改),它更接近我最终想要实现的目标: http://plnkr.co/edit/Kj4xalhI28i5IU0hGBLL？p = preview.它还没有完全存在......我希望设置3个下拉列表中的每一个都设置最接近匹配的动态值someDynamicArrayOfValues.
我认为使用标签ng-options的属性会很好select。这是一个根据选项数组创建选项的角度指令。你可以看一下
如果您使用您的代码 - 您的函数，选择文档myFunctionForDeterminingWhetherValueIsSelected在初始化时对每个选项运行两次，当您选择另一个选项时对每个选项项运行一次。
您可以在指令的描述中看到选择的演示select。
首先，要查看值何时更改 - 您需要使用标签ng-change的属性select，如下所示：
<select ng-model="mySelectedValue"
ng-options="myValue for myValue in someDynamicArrayOfValues"
ng-change="myFunctionForDeterminingWhetherValueIsSelected()">
<option value="">--</option>
</select>
然后，我不知道它是什么myFunctionForSettingSelectedValue样子，但有两种变体：
ng-init下一个方法。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>
mySelectedValue- 然后执行此操作。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>
我创建了一个示例，它实现了使用的第一个版本ng-init。当选择新值时 - 它将打印到控制台。
另外，我将选项移至options.json文件中。因此选项在 ajax 请求完成后立即初始化。一切都很好。
再一次问好。ng-init我认为根据你的要求，你不需要有任何东西。您可以在 http 请求完成后初始化模型的值。我也不明白你为什么需要ng-change在这种情况下需要功能。
这是您需要从 plunk 中修改的代码，其中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>
| 归档时间： |
|
| 查看次数： |
27086 次 |
| 最近记录： |