Question

即时使用此plunker autocomplete

<!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中的所有对象

例如在上面的链接中如果我复制世界鸡并将其粘贴在输入中它将不会给我对象它将只是文本，如果我插入世界c并选择鸡我将获得ng-model对象（包含id和名称）

Answer 1

HERE是工作人员按下然后停止运行，BUK IN PLUNKER ：http://plnkr.co/edit/QGqDjhzcFVNSHxA2hmHM?p=preview

它应该是ng-bind而不是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>

Answer 2

看看工作示例，

http://plnkr.co/edit/Z930HmH83KIENuEjWhx3?p=preview

我稍微更改了你的代码并使其成为角度代码而不是java脚本代码。

我希望它能奏效。我把你的json放在.json文件中并使用$ http service调用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'));
});

我希望对此解决方案的一点修改会将您带到所需的解决方案。

在输入中复制文本时自动完成angularjs

2 个答案: