Question

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

但是如果你单击列表上的项目并点击空格，那么整个项目将被保存。

我希望我选择项目名称必须保存店模型的列表。

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


      }


      });

Answer 1

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

为了解决这种情况，我强烈建议您使用角度引导程序。

你可以在这里找到它。Bootsrap_Angular

供您参考，如何使用有角度的check this one Example

自动完成

使用AngularJS自动完成

1 个答案: