im, используя этот автозаполнение plunker
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
<h3 class="ng-binding">Item Name: {{item.name}}</h3>
<h3 class="ng-binding">Item Id: ({{item.id}})</h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
</div>
</body>
</html>
в моем проекте, я сталкиваюсь с проблемой, когда я пытаюсь редактировать, я автоматически заполняю вход, поэтому проблема в том, что я просто получаю текст и весь объект в ng-model
например, в ссылке выше, если я копирую мир Chicken и вставляю его во вход, он не даст мне объект, это будет просто текст, если я вставляю мир c и выбираю вариант Chicken i, я получу в ng-модели объект (которые содержат идентификатор и имя)
Посмотрите на рабочий пример,
http://plnkr.co/edit/Z930HmH83KIENuEjWhx3?p=preview
Я немного изменил свой код и сделал его угловым кодом, а не кодом java-скрипта.
Надеюсь, это сработает. Я взял ваш json в.json файл и с помощью вызова $ http, вызванного этим json.
var app = angular.module('myApp', ['ui.bootstrap']);
app.factory('autoComplete',function($http){
return{
load:function(){
$http.get('data.json').success(function (data){
sessionStorage.setItem( 'items', JSON.stringify(data) );
})
}
}
})
app.controller('TypeaheadCtrl',function($scope,$http,autoComplete){
$scope.selected = undefined;
$scope.items = JSON.parse(sessionStorage.getItem('items'));
});
Я надеюсь, что небольшая модификация этого решения приведет вас к вашему требуемому решению.
ЗДЕСЬ - рабочий плункер. PRESS STOP THEN RUN, BUG В PLUNKER: http://plnkr.co/edit/QGqDjhzcFVNSHxA2hmHM?p=preview
Это должно быть ng-bind
not ng-binding
и не должно быть class= ng-binding
(угловые директивы не являются классами css), это должно быть Item name: <h3 ng-bind="item.name"></h3>
. Вот пример с сайта angularJS:
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>
и здесь ваш код отредактирован:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
Item name: <h3 ng-bind="item.name"></h3>
Item ID: <h3 ng-bind="item.id"></h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
</div>