在AngularJS中,可以使用ui-select来实现多选选择。要在最后一个循环中选择选项,可以使用$last
变量来判断是否是最后一个循环,并将选项设置为选中状态。
以下是一个示例代码:
HTML模板:
{{$item.label}}
控制器代码:
$scope.selectedOptions = [];
$scope.options = [
{label: 'Option 1', value: 1},
{label: 'Option 2', value: 2},
{label: 'Option 3', value: 3},
// 添加更多选项...
];
$scope.$watch('selectedOptions', function(newVal, oldVal) {
if ($scope.selectedOptions.length > 0 && $scope.selectedOptions[$scope.selectedOptions.length - 1] && $last) {
$scope.selectedOptions[$scope.selectedOptions.length - 1].selected = true;
}
}, true);
在上面的代码中,$scope.options
是可供选择的选项列表,$scope.selectedOptions
是已选择的选项列表。通过使用$scope.$watch
监听$scope.selectedOptions
的变化,当有选项被选择时,会触发回调函数。在回调函数中,可以通过$last
变量来判断是否是最后一个循环,并将最后一个选项设置为选中状态。
请注意,以上示例代码中使用了ng-bind-html
指令来显示选项的标签文本。如果选项的标签中包含HTML代码,需要在控制器中注入$sce
服务,并通过$sce.trustAsHtml
方法将HTML代码标记为可信任。例如:
app.controller('MyController', ['$scope', '$sce', function($scope, $sce) {
$scope.options = [
{label: $sce.trustAsHtml('Option 1'), value: 1},
{label: $sce.trustAsHtml('Option 2'), value: 2},
// 添加更多选项...
];
}]);
这样做是为了避免AngularJS的SCE(Strict Contextual Escaping)机制对HTML代码进行转义。