热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:Angularjs插件uiselect的使用方法

篇首语:本文由编程笔记#小编为大家整理,主要介绍了Angularjs插件ui-select的使用方法相关的知识,希望对你有一定的参考价值。最近这个项目中需要用到ui-se

篇首语:本文由编程笔记#小编为大家整理,主要介绍了Angularjs插件ui-select的使用方法相关的知识,希望对你有一定的参考价值。


最近这个项目中需要用到ui-select下拉框插件来进行对用户的本地搜索并选中,这里分享一下ui-select插件在angularjs中的用法以及注意事项。


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.css" rel="stylesheet">
head>
<body>
<div>
<div ng-app="app" ng-controller="ctrl">
<ui-select ng-model="selected.value">
<ui-select-match>
<span ng-bind="$select.selected.name">span>
ui-select-match>
<ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id">
<span ng-bind="item.name">span>
ui-select-choices>
ui-select>
div>
div>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js">script>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular-sanitize.min.js">script>
<script src="https://cdn.bootcss.com/angular-ui-select/0.20.0/select.min.js">script>
<script>
angular.module(
app,[ui.select,ngSanitize])
.controller(
ctrl, [$scope, function ($scope){
$scope.itemArray
= [
{id:
1, name: first},
{id:
2, name: second},
{id:
3, name: third},
{id:
4, name: fourth},
{id:
5, name: fifth},
];
$scope.selected
= { value: $scope.itemArray[2] };
}]);
script>
body>
html>

需要注意的就是双向绑定的时候传入的是那个选中的对象,而不是选中的value,这个地方有点坑,需要注意一下。


推荐阅读
author-avatar
小超201209
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有