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,这个地方有点坑,需要注意一下。

  • 相关阅读:
    NPOI单元格公式不刷新
    DIV+CSS HACK
    简答好用的邮件服务器hMailServer(转)
    C# 后台POST和GET 获取数据
    Quartz.Net1.0.2.3 配置记录
    ASP.NET自定义控件VS2012中添加失败(下列控件已成功添加到工具箱中,但未在活动设计器中启用)
    NPOI 1.2.5复制行(包括格式)
    Javascript中Null和Undefined的区别[转]
    测试流程(立项会)
    测试计划
  • 原文地址:https://www.cnblogs.com/xianxiaobo/p/9322673.html
Copyright © 2011-2022 走看看