我现在尝试在 angularjs typeahead 上使用案例,但它总是不起作用,我是否忘记导入一些 js 文件?请帮帮我,谢谢
HTML:
<!doctype html>
<html ng-app="search">
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Search</title>
</head>
<body ng-controller="SearchController as search">
<h4>Static arrays</h4>{{search.states}}
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-change="onedit()" ng-model="selected" uib-typeahead="state for state in search.states | filter:$viewValue | limitTo:8">
JS:
(function () {
var app = angular.module('search', []);
app.controller('SearchController', ['$window', '$http', function ($window, $http){
var search = this;
search.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
最佳答案
//Define "ui.bootstrap" dependency here
var app = angular.module('search', ['ui.bootstrap']);
app.controller('SearchController', function ($scope){
$scope.selected="";
// Set your object
$scope.objects = [
{id:1, name : 'Dilip', type :{ title : 'a'}},
{id:2, name : 'Devendra', type :{ title : 'b'}},
{id:3, name : 'Jayesh', type :{ title : 'a'}},
{id:4, name : 'Jekin', type :{ title : 'c'}},
{id:5, name : 'Gaurang', type :{ title : 'a'}},
{id:6, name : 'Bhavin', type :{ title : 'e'}},
];
});
<!DOCTYPE html>
<html ng-app="search">
<head>
<meta charset="UTF-8">
<title>dynamic form</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
</head>
<body ng-controller="SearchController">
<!-- in uib-typeahead specify that property / attribute name which you want to display in drop down
in filter service specify an object with which you want to compare
for example if you want to compare this object by type then
filter : { type : $viewValue }
-->
<input type="text" ng-model="selected" uib-typeahead="object.name for object in objects | filter: {name:$viewValue} | limitTo:8">
</body>
</html>
关于Angularjs typeahead 示例总是不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38320366/