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

  • 相关阅读:
    第一节:RestfulCRUD案例
    第三节:<mvc:annotationdriven />标签解析
    第二节:SpringMVC 的表单标签
    第一节:SpringMVC—数据绑定流程分析
    第四章:(2)Web开发 之 webjars&静态资源映射规则
    第三节:处理静态资源
    10.05
    四则运算二柱子1
    10.08
    10.02
  • 原文地址:https://www.cnblogs.com/xianxiaobo/p/9322673.html
Copyright © 2020-2023  润新知