我需要使用angularjs实现自动完成下拉列表。 下拉包含所有大学名称。这些名称我基于ajax调用并将这些值添加到$ scope.apply函数内的一个$ scope变量中。但是这个$ scope变量没有在指令内部更新。 当我搜索它显示我必须使用$ watch。我如何在指令
中实现$ watch这是我的HTML代码
<html ng-app="myApp">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" rel="stylesheet">
<link href="http://fiddle.jshell.net/css/normalize.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="https://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<div>
<input auto-complete ui-items="university" ng-model="selected">
selected = {{selected}}
</div>
</div>
</body>
</html>
Angular js Code
var myApp = angular.module('myApp', [])
myApp.controller('HelloController', function ($scope)
{
$.ajax({
type: 'GET',
url: 'university.json',
dataType: "json",
success: function(response)
{
$scope.$apply(function ()
{
angular.forEach(response, function(value, key)
{
$scope.university.push(value.name);
});
});
},
error: function(){}
});
});
myApp.directive('autoComplete', function($timeout)
{
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
});
示例json
[{"web_page": "http://www.gzu.ac.zw/", "country": "Zimbabwe", "domain": "gzu.ac.zw", "name": "Great Zimbabwe University"},
{"web_page": "http://www.hit.ac.zw/", "country": "Zimbabwe", "domain": "hit.ac.zw", "name": "Harare Institute of Technology"},
{"web_page": "http://www.lsu.ac.zw/", "country": "Zimbabwe", "domain": "lsu.ac.zw", "name": "Lupane State University"},
{"web_page": "http://www.msu.ac.zw/", "country": "Zimbabwe", "domain": "msu.ac.zw", "name": "Midlands State University"},
{"web_page": "http://www.nust.ac.zw/", "country": "Zimbabwe", "domain": "nust.ac.zw", "name": "National University of Science and Technology Bulawayo"},
{"web_page": "http://www.rcu.ac.zw/", "country": "Zimbabwe", "domain": "rcu.ac.zw", "name": "Reformed Church University"},
{"web_page": "http://www.solusi.ac.zw/", "country": "Zimbabwe", "domain": "solusi.ac.zw", "name": "Solusi University"},
{"web_page": "http://www.uz.ac.zw/", "country": "Zimbabwe", "domain": "uz.ac.zw", "name": "University of Zimbabwe"},
{"web_page": "http://www.wua.ac.zw/", "country": "Zimbabwe", "domain": "wua.ac.zw", "name": "Women's University in Africa"},
{"web_page": "http://www.zegu.ac.zw/", "country": "Zimbabwe", "domain": "zegu.ac.zw", "name": "Zimbabwe Ezekiel Guti University"},
{"web_page": "http://www.zou.ac.zw/", "country": "Zimbabwe", "domain": "zou.ac.zw", "name": "Zimbabwe Open University"}]
谢谢。