使用 AngularJS 自动完成答案

【问题标题】：Autocomplete with AngularJS使用 AngularJS 自动完成
【发布时间】：2015-10-29 06:52:28
【问题描述】：

只需键入任何一个字母（例如，“c”），您将获得列表并选择项目。但是在模型中没有保存完整的名称，它只会保存您输入的第一个字符。

但是，如果您单击列表中的项目并按空格键，则将保存整个项目。

我希望在选择项目名称时保存旅馆模型的列表。

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

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <title></title>
    <script src="script.js"></script>
</head>

<body ng-controller="NameCtrl">
    <h4 class="text-center txtC1">Enter your medicines</h4>
    <input type="text" ng-keypress="complete()" ng-model="enteredName" id="tags" />
    <p>{{enteredName}}</p>
    <p class="rr txtC2">Type</p>
    <select id="dd" ng-model="sel">
        <option value="Days">Days</option>
        <option value="Tabs">Tab</option>
        <option value="Packs">Pack</option>
    </select>
    <p class="rr txtC2">Qty</p>
    <input type="number" class="rr" ng-model="ww" id="dd" />
    <br />&nbsp
    <div class="col-xs-12 col-sm-12 text-center ">
        <button id="btn2" ng-click="addName()">Add</button>
        <button id="btn2">Order</button>
    </div>
    <div class="col-xs-12">
        <p class="txtC1">
            Cart
            <hr>
        </p>
    </div>
    <div class="col-xs-12 dd1">
        <ul class="list-unstyled">
            <li class="tt" ng-repeat="name in names">
                {{name.x1}} x {{name.tp}} x {{name.qty}}
                <a class="fa fa-close tt1" ng-click="removeName(name)">remove</a>
                <a class="fa fa-edit tt1" ng-click="edit(name)">edit</a>
            </li>
        </ul>
        <div>
        </div>
    </div>
</body>
</html>

控制器：

var app = angular.module('myApp', []);


 app.controller('NameCtrl', function ($scope){

   $scope.availableTags = [
"Combiflame ",
"Crocine",
"Alphine",
"Nitro",
"Betnisol",
"Daliy Dose",
"Eyetone",
"Kyrotop",
"ramtop",
"Glizid-M"
];

    $scope.complete=function(){
    $( "#tags" ).autocomplete({
      source: $scope.availableTags
    });
    } 




if($scope.ww != ''){
         $scope.names = [


        ];}
        else{

        }


        $scope.addName = function() {

    console.log (    $scope.names)    

if($scope.ww != ''){

     $scope.names.push({'x1':$scope.enteredName,'tp':$scope.sel,          'qty':$scope.ww});
          $scope.enteredName = '';

 $scope.ww = '';
 $scope.tp = '';


}else
{

}



        };

        $scope.removeName = function(name) {
          var i = $scope.names.indexOf(name);
          $scope.names.splice(i, 1);
        };





      $scope.edit = function(name){

           var i = $scope.names.indexOf(name);

        $scope.enteredName = name.x1; 
        $scope.sel = name.tp;
        $scope.ww = name.qty;

           $scope.names.splice(i, 1);


      }


      });

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

这是因为您正在使用带有角度的 jquery 自动完成功能。当 jquery 改变值时，它不会消化 angular。也就是说，当自动完成更改您的文本值时，它不会更改它在角度内的相应模型。

要解决这种情况，我强烈建议您使用 Angular 的引导程序。

你可以在这里找到它。Bootsrap_Angular

供您参考如何使用角度自动完成，check this oneExample

【讨论】：