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,這個地方有點坑,需要注意一下。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM