我有一个ui-select包装在ng-repeat指令中的。由于它们具有相同的作用域，所以我有几个问题：
在第一个选择中选择值后，第二个选择已经预先填充了我第一次输入的内容。
占位符被隐藏，仅显示在选择字段中的焦点。
这是html：
<div ng-repeat="repeat in repeats">
<p>Selected: {{repeat.id.formatted_address}}</p>
<ui-select ng-model="repeat.id"
theme="bootstrap"
ng-disabled="disabled"
reset-search-input="false"
style="width: 300px;">
<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
<ui-select-choices repeat="address in addresses track by $index"
refresh="refreshAddresses($select.search)"
refresh-delay="0">
<div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
问题是使用几种ui-select指令防止这些问题的正确方法是什么？
您可以为地址查找创建指令，并将查找逻辑移至指令控制器。每个指令实例将具有其自己的控制器实例，并因此具有其自己的实例$scope.addresses（防止预填充第二个选择以及第一个选择的行为）。
<div ng-repeat="repeat in repeats">
<address-selector repeat="repeat"></address-selector>
</div>
app.directive('addressSelector', function() {
return {
restrict: 'E',
scope: {
repeat: '='
},
template:
'<p>Selected: {{repeat.id.formatted_address}}</p>' +
'<ui-select ng-model="repeat.id"' +
' theme="bootstrap"' +
' ng-disabled="disabled"' +
' reset-search-input="false"' +
' style="width: 300px;">' +
'<ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>' +
'<ui-select-choices repeat="address in addresses track by $index"' +
' refresh="refreshAddresses($select.search)"' +
' refresh-delay="0">' +
' <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>' +
'</ui-select-choices>' +
'</ui-select>',
controller: function ($scope, $http) {
$scope.refreshAddresses = function(address) {
var params = {address: address, sensor: false};
return $http.get(
'http://maps.googleapis.com/maps/api/geocode/json',
{params: params}
).then(function(response) {
$scope.addresses = response.data.results
});
};
}
};
});
为了使用户界面选择的占位符出现，您应该避免初始化模型（repeat.id）或将其设置为null。
app.controller('DemoCtrl', function($scope) {
$scope.repeats=[{}, {}];
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句