zoukankan      html  css  js  c++  java
  • Angularjs插件ui-select的使用方法

    最近这个项目中需要用到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,这个地方有点坑,需要注意一下。

  • 相关阅读:
    SQL 函数以及SQL 编程
    查询练习(四十五道题)
    SQL server 高级查询
    SQL server 数据库 操作及简单查询
    T-SQL 语句
    SQL
    表单验证、实则表达式、事件
    视频插入代码
    插入地图
    网页布局小练
  • 原文地址:https://www.cnblogs.com/xianxiaobo/p/9322673.html
Copyright © 2011-2022 走看看