在加载ng选项之前更新模型时选择选项
select option when the model is updated before ng-options is loaded
我有一个"state select"指令,它用基于countryCode的状态列表填充select元素。该指令监视countryCode的更改,以更新提供给ng选项的属性。
我现在正尝试从控制器设置model.countryCode和model.sateCode,但由于countryCode更改时会填充状态选择,因此在加载选项之前会更新模型值。
在我加载选项后,如何确保select确实选择了其ng模型中引用的选项?
这是我的指示:
.directive( 'stateSelect', [ 'CDN_VIEW', 'locationService', function( CDN_VIEW, locationService ) {
return {
restrict: 'E',
scope: {
'ngModel': '=',
'country': '=',
},
link: function stateSelect( $scope, elements, attrs ) {
$scope.states = null;
function loadCountryStates( countryCode ) {
if ( !countryCode ) {
return false;
}
$scope.ngModel = undefined;
locationService.getCountryStates( countryCode ).then ( function getStates( states ) {
$scope.states = states;
} );
}
$scope.$watch( 'country', loadCountryStates );
},
templateUrl: 'states.html'
};
} ] )
模板:
<select ng-model="ngModel" ng-options="s.code as s.name for s in states">
<option value="" disabled>select state</option>
</select>
以下是指令的用法:
<state-select ng-model="info.stateCode" country="info.countryCode">
这是我在控制器中所做的:
function setDetectedLocation( location ) {
$scope.info.countryCode = location.countryCode;
$scope.info.stateCode = location.stateCode;
$scope.info.city = location.city;
}
locationService.getLocation().then( setDetectedLocation, locationError );
当我手动填充select时,它可以工作,如果我运行getLocation两次,当国家的状态已经加载时,它也可以工作。
有指针吗?
我终于解决了这个问题。诀窍是将控制器模型(持有实值的模型)和指令的选择模型(持有所选选项的模型)解除关联。通过这种方式,我可以手动观察两者的变化,并在需要时更新值。
以下是对指令的更改:
scope: {
'ngModel': '=',
'country': '=',
},
link: function stateSelect( $scope, element, attrs ) {
$scope.states = null;
$scope.state = { 'code': undefined };
function loadCountryStates( countryCode ) { ... }
$scope.$watch( 'country', loadCountryStates );
// watch manual change on select
$scope.$watch( 'state.code', function( stateCode ) {
$scope.ngModel = stateCode;
} );
// watch further changes to the model
$scope.$watch( 'ngModel', function( stateCode ) {
if ( stateCode ) {
$scope.state.code = stateCode;
}
} );
}
以下是对模板的更改:
<select ng-model="state.code" ng-options="s.code as s.name for s in states">
</select>
请注意select现在是如何链接到指令的state.code
的,然后通过ngModel
监视并与controllers属性同步。
我不知道为什么原来的方法不起作用!
您可以创建一个initStateTo参数,该参数在设置时将初始化指令中的状态值。
$scope.info.initStateTo = "CA";
<state-select ng-model="info.stateCode" country="info.countryCode"
initStateTo="info.initStateTo">
$scope.ngModel = undefined;
locationService.getCountryStates( countryCode ).then (
function getStates( states ) {
$scope.states = states;
if($scope.initStateTo) {
$scope.ngModel = $scope.initStateTo;
$scope.initStateTo = undefined;
}
} );
相关文章:
- 如何将ng选项的索引作为angularJs中的值传递给模型
- 角度去抖动(ng模型选项)不起作用
- 选择框中带有关联的ng模型,选项中带有ng重复
- AngularJS模型在手动更改选项后不会更新
- 为什么ng选项指令需要ng模型
- 为什么ng模型重置所选选项
- 选择与ng模型和ng选项绑定时不进行选择
- angular 1.3中的ng选项在集合异步设置时忘记了ng模型
- 如何在Angularjs中使用ng选项时更新ng模型
- Select选项包含在验证模型MVC时不起作用
- 如何根据已知的ng选项和标准设置ng模型
- 所选选项更改时,模型不会更新
- 如何将类模型与 Redux 一起使用(带有 Mobx 选项)
- 使用表达式属性访问不同的模型模板选项
- 为什么当我将数据选项添加到骨干模型获取时,它不会触发回调
- NG 模型未绑定在选择元素中的 NG 重复选项上
- 使用 ng 模型有条件地过滤 ng 选项
- 如何使用轨迹选项进行选择,以角度保存模型中的选定对象
- 为简单数组提供带有 ng 选项的模型索引
- Angular JS - 获取选定的文本作为ng模型(没有ng选项)