автозаполнение angularjs при копировании текста на входе

0

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-модели объект (которые содержат идентификатор и имя)

  • 0
    Я оставил работающий поршень в своем ответе ниже ...

2 ответа

0

Посмотрите на рабочий пример,

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'));
});

Я надеюсь, что небольшая модификация этого решения приведет вас к вашему требуемому решению.

0

ЗДЕСЬ - рабочий плункер. 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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню