Question

我有一个包含name和id的对象。我只想根据名称进行自动完成。我已经尝试了如下所示的代码

//Js file
var app=angular.module("myapp",[]);
app.controller("controller",['$scope',function($scope){
    $scope.persons=[
                    {
            Name:"Bhavani",
            Id:67
    },
    {
        Name:"Mamata",
        Id:66
    },
    {
        Name:"Prasanna",
        Id:65
    },
    {
        Name:"Ramya",
        Id:64
    },
    {
        Name:"Navya",
        Id:63
    }
    ];
    $scope.complete=function(){
        $("#autocomp").autocomplete({
            source: $scope.persons.Id
        });
    };
}]);

// Html文件

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">
    <div ng-repeat="p in persons">{{p.Name}}
    </div>
     <div class="ui-widget">
    <input type="text" id="autocomp" ng-keyup="complete()">
    </div>
</body>
</html>

上面的代码可能有一些错误。它没有得到我想要的输出。任何人都可以帮我解决这个问题。

Answer 1

这是你应该如何在AngularJS项目中使用任何jQuery API（我相信）。无论何时进行DOM操作或jQuery操作，都应该放在link: function() {} via指令中。

您的代码可能存在的主要问题是source: $scope.persons.Id只是一个数字。 sourc e需要是一个字符串数组（至少根据文档）。因此，我将persons数组中的所有名称分隔，并将它们放入新数组peopleNames

    <!doctype html>
    <html lang="en" ng-app="myapp">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI Autocomplete - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

      <script src="vendors/angular.min.js"></script>
    </head>
    <body ng-controller="controller">

        <div ng-repeat="p in persons">{{p.Name}}
        </div>

        <div class="ui-widget">
          <input type="text" id="tags" autocomplete-directive>
        </div>

      <script>
        var app = angular.module("myapp",[]);

    app.controller("controller",['$scope',function($scope){
        $scope.persons=[
                        {
                Name:"Bhavani",
                Id:67
        },
        {
            Name:"Mamata",
            Id:66
        },
        {
            Name:"Prasanna",
            Id:65
        },
        {
            Name:"Ramya",
            Id:64
        },
        {
            Name:"Navya",
            Id:63
        }
        ];

      // array of only strings autocomplete
      $scope.peopleNames = [];

      for(var i = 0, j = $scope.persons.length; i < j; i++) {
        $scope.peopleNames.push($scope.persons[i].Name);
      }

    }]);

        app.directive('autocompleteDirective', [function($scope) {
          return {
            link: function(scope, element, attrs) {
              element.autocomplete({
                source: scope.peopleNames
              });
            }
          };
        }]);
      </script>
    </body>

    </html>

Answer 2

试试这样， HTML：

 <div ng-app = "myapp">
    <div ng-controller="controller">
      <div class="ui-widget">
         <input type="text" id="autocomp" auto-complete>
        </div>
    </div>
  </div>

JS：

var app = angular.module("myapp",[]);
app.controller("controller",function($scope){
  $scope.availableTags = [
     {
            Name:"Bhavani",
            Id:67
    },
    {
        Name:"Mamata",
        Id:66
    },
    {
        Name:"Prasanna",
        Id:65
    },
    {
        Name:"Ramya",
        Id:64
    },
    {
        Name:"Navya",
        Id:63
    }
    ];

}).directive("autoComplete",function(){
  return function(scope,element,attrs){
    var names =$.map(scope.availableTags,function(value){   return value.Name;          
 });
      element.autocomplete({
      source: names
    });


    };
});

工作jsbin

Answer 3

感谢每一个人建议我回答。我也采取了另一种方式。这可能对其他人有帮助。

//html file

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.js"></script>
<script src="angularfiles/angular-animate.js"></script>
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="angularfiles/bootstrap-theme.css"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">


<div ng-repeat="p in persons">{{p}}</div>
        <div class="ui-widget">
          <input type="text" ng-model="selected" typeahead="p.Name for p in persons | filter:$viewValue">

        </div>
</body>
</html>

//js file

var app = angular.module("myapp",['ui.bootstrap']);

    app.controller("controller",['$scope',function($scope){

        $scope.persons=[
                        {
                Name:"Bhavani",
                Id:67
        },
        {
            Name:"Mamata",
            Id:66
        },
        {
            Name:"Prasanna",
            Id:65
        },
        {
            Name:"Ramya",
            Id:64
        },
        {
            Name:"Navya",
            Id:63
        }
        ];

    }]);

如何在角度js中获得自动完成功能？

3 个答案: