如何在 ng-repeat 指令中正确使用 ui-select
How to use properly ui-select in ng-repeat directive
我有一个 ui-select
包装在 ng-repeat
指令中。由于它们共享相同的范围,我有几个问题:
在第一个 select 中 select 的值之后 select 已经预先填充了我首先输入的内容。
占位符是隐藏的,仅当 select 字段处于焦点时才显示。
这里是 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
实例(防止预填充第二个 select 和第一个
的行为)。
<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
});
};
}
};
});
要显示ui-select占位符,应避免初始化模型(repeat.id
),或将其设置为null
.
app.controller('DemoCtrl', function($scope) {
$scope.repeats=[{}, {}];
});
你也可以这样做。数组中的每个对象都有自己的 selected
项。要添加新的重复,您只需 $scope.repeats.push({})
并删除重复 $scope.repeats.splice(index, 1);
。如果你想将 $scope.repeats
推送到 API,请记住使用 angular.toJson($scope.repeats)
而不是 JSON.stringify($scope.repeats)
。
当然 selected
如果您只有该数据,则不需要子项。我有更多物品,所以这对我很有用
file.js
$scope.repeats=[{}, {}];
file.html
<div ng-repeat="repeat in repeats">
<p>Selected: {{repeat.selected.formatted_address}}</p>
<ui-select ng-model="repeat.selected">
<ui-select-match placeholder="Enter an address...">
{{$select.selected.formatted_address}}
</ui-select-match>
<ui-select-choices repeat="address in addresses track by $index">
<div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
输出数据可能如下所示:
$scope.repeats == [
{
selected: {
formatted_address: "98 Hubin Middle Rd"
}
},
{
selected: {
formatted_address: "100 Rogwart Way"
}
}
];
我有一个 ui-select
包装在 ng-repeat
指令中。由于它们共享相同的范围,我有几个问题:
在第一个 select 中 select 的值之后 select 已经预先填充了我首先输入的内容。
占位符是隐藏的,仅当 select 字段处于焦点时才显示。
这里是 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
实例(防止预填充第二个 select 和第一个
<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
});
};
}
};
});
要显示ui-select占位符,应避免初始化模型(repeat.id
),或将其设置为null
.
app.controller('DemoCtrl', function($scope) {
$scope.repeats=[{}, {}];
});
你也可以这样做。数组中的每个对象都有自己的 selected
项。要添加新的重复,您只需 $scope.repeats.push({})
并删除重复 $scope.repeats.splice(index, 1);
。如果你想将 $scope.repeats
推送到 API,请记住使用 angular.toJson($scope.repeats)
而不是 JSON.stringify($scope.repeats)
。
当然 selected
如果您只有该数据,则不需要子项。我有更多物品,所以这对我很有用
file.js
$scope.repeats=[{}, {}];
file.html
<div ng-repeat="repeat in repeats">
<p>Selected: {{repeat.selected.formatted_address}}</p>
<ui-select ng-model="repeat.selected">
<ui-select-match placeholder="Enter an address...">
{{$select.selected.formatted_address}}
</ui-select-match>
<ui-select-choices repeat="address in addresses track by $index">
<div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
输出数据可能如下所示:
$scope.repeats == [
{
selected: {
formatted_address: "98 Hubin Middle Rd"
}
},
{
selected: {
formatted_address: "100 Rogwart Way"
}
}
];