分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

Angularjs插件ui-select的使用方法

发布时间:2023-09-06 02:04责任编辑:熊小新关键词:jsAngular

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

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<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,这个地方有点坑,需要注意一下。

Angularjs插件ui-select的使用方法

原文地址:https://www.cnblogs.com/xianxiaobo/p/9322673.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved