如何在输入字段中使用提前输入来获取 Angularjs 中的值？

Question

我在我的应用程序中使用 MEAN 堆栈，AngularJS 作为我的前端。我如何在输入字段中使用 typeahead 来获取 angularjs 中的值，实际上如果我们使用 select 选项我们会得到值，但我们期待 type-ahead 选项...请查看 plunker for引用 My Plunker.

在 plunker first select 选项中用于获取无数组值。
第二个select选项用于获取user数组中的值。所以我们用了 ng-options="item.user.displayName for item in questions"
但是我们期望预输入选项在 user 数组中获取 displayNmae 值。所以我们用了 typeahead="item as item.user.displayName for item in questions | filter:$viewValue | limitTo:8" 但是我们得不到答案...
我们在第三个输入字段中查找的内容如果我们键入名称，下拉菜单应该需要显示...
请知道解决办法的朋友请更新plunker，知道解决方法

我的数据：-

$scope.questions = [
{
"_id": "583433ddc021a5d02949a51b",
"user": {
"_id": "5834336ac021a5d02949a51a",
"displayName": "mani R",
"location": "ICF",
"dob": "1991-10-05T18:30:00.000Z",
"religion": "Christian",
"roles": [
"user"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Moral Ethics",
"content": "Dhoni",
"title": "which batsman is best in the world?",
"created": "2016-11-22T12:02:37.376Z"
},
{
"_id": "582c34b3ff26bd603e1e5383",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [],
"users": [],
"comments": [
{
"created": 1479365394684,
"email": "ms@e21designs.com",
"name": "Table 1",
"commentText": "Dhoni"
}
],
"friend_tag": [],
"emotion": "Confused",
"category": "Environment & Health",
"content": "sachin?",
"title": "who is best player in this world?",
"created": "2016-11-16T10:28:03.859Z"
},
{
"_id": "582c3418ff26bd603e1e5382",
"user": {
"_id": "582c1f4b53cf7fec2ddf282e",
"displayName": "selvam R",
"dob": "1991-10-04T18:30:00.000Z",
"roles": [
"kp"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Environment & Health",
"content": "he is tennis player",
"created": "2016-11-16T10:25:28.835Z"
},
{
"_id": "582ad554714543e037cf3bf2",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms@e21designs.com"
],
"upvotes": 1,
"category": "Moral Ethics",
"created": "2016-11-15T09:28:52.403Z"
},
{
"_id": "5821e7c667b70aac2b8fdfdc",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms@e21designs.com"
],
"upvotes": 1,
"category": "Religion & Culture",
"created": "2016-11-08T14:57:10.354Z"
}
]

我的Html:-

<div style="margin-top: 20px;">
  <label style="color: green;">3. Typeahead Not Working</label>
    <input ng-model="friend" typeahead-min-length="3" typeahead="item as item.user.displayName for item in questions | filter:$viewValue | limitTo:8">

 </div>

我们在 Mr.J-Mean 的帮助下得到了答案，但是我们还有一个问题，如果我们在 Typeahead 输入中键入 table 1 这样的名称，它会显示三个 Table 1 名称，如果我们的数据中有相同的名称，则意味着我们希望只显示一个名称，例如 Table 1 请帮助我们...请在 plunker 中更新您的答案并了解解决方案...谢谢

Answer 1

要使其正常工作，需要插件-我使用了 UI Bootstrap

的 Typeahead

请找到您的问题的解决方案

(function () {
    'use strict';

    var app = angular.module('TypeaheadDemo', ['ui.bootstrap', 'ngTagsInput']);

    app.controller('TypeaheadCtrl', function ($scope, $http, $filter) {

        var _selected;
        $scope.questions = [
      {
          "_id": "583433ddc021a5d02949a51b",
          "user": {
              "_id": "5834336ac021a5d02949a51a",
              "displayName": "mani R",
              "location": "ICF",
              "dob": "1991-10-05T18:30:00.000Z",
              "religion": "Christian",
              "roles": [
              "user"
              ],
              "profileImageURL": "modules/users/client/img/profile/default.png"
          },
          "__v": 0,
          "upvoters": [],
          "category": "Moral Ethics",
          "content": "Dhoni",
          "title": "which batsman is best in the world?",
          "created": "2016-11-22T12:02:37.376Z"
      },
      {
          "_id": "582c34b3ff26bd603e1e5383",
          "user": {
              "_id": "58072aba0f82a61823c434df",
              "displayName": "Table 1",
              "dob": "1991-10-04T18:30:00.000Z",
              "location": "Icf",
              "religion": "Hindu",
              "roles": [
              "admin"
              ],
              "profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
          },
          "__v": 1,
          "upvoters": [],
          "users": [],
          "comments": [
          {
              "created": 1479365394684,
              "email": "ms@e21designs.com",
              "name": "Table 1",
              "commentText": "Dhoni"
          }
          ],
          "friend_tag": [],
          "emotion": "Confused",
          "category": "Environment & Health",
          "content": "sachin?",
          "title": "who is best player in this world?",
          "created": "2016-11-16T10:28:03.859Z"
      },
      {
          "_id": "582c3418ff26bd603e1e5382",
          "user": {
              "_id": "582c1f4b53cf7fec2ddf282e",
              "displayName": "selvam R",
              "dob": "1991-10-04T18:30:00.000Z",
              "roles": [
              "kp"
              ],
              "profileImageURL": "modules/users/client/img/profile/default.png"
          },
          "__v": 0,
          "upvoters": [],
          "category": "Environment & Health",
          "content": "he is tennis player",
          "created": "2016-11-16T10:25:28.835Z"
      },
      {
          "_id": "582ad554714543e037cf3bf2",
          "user": {
              "_id": "58072aba0f82a61823c434df",
              "displayName": "Table 1",
              "dob": "1991-10-04T18:30:00.000Z",
              "location": "Icf",
              "religion": "Hindu",
              "roles": [
              "admin"
              ],
              "profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
          },
          "__v": 1,
          "upvoters": [
          "ms@e21designs.com"
          ],
          "upvotes": 1,
          "category": "Moral Ethics",
          "created": "2016-11-15T09:28:52.403Z"
      },
      {
          "_id": "5821e7c667b70aac2b8fdfdc",
          "user": {
              "_id": "58072aba0f82a61823c434df",
              "displayName": "Table 1",
              "dob": "1991-10-04T18:30:00.000Z",
              "location": "Icf",
              "religion": "Hindu",
              "roles": [
              "admin"
              ],
              "profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
          },
          "__v": 1,
          "upvoters": [
          "ms@e21designs.com"
          ],
          "upvotes": 1,
          "category": "Religion & Culture",
          "created": "2016-11-08T14:57:10.354Z"
      }
        ]

        $scope.filterTags = function ($query) {
            var filterList = $filter('filter')($scope.questions, $query);         //filter the data  
            var removedDuplicate = $filter('unique')(filterList, 'user.displayName');//Removed duplicates
            return angular.forEach(removedDuplicate, function (question) {
                question.custName = question.user.displayName;
            });

            return removedDuplicate;
        };
    });

    app.filter('unique', function () {

        return function (items, filterOn) {

            if (filterOn === false) {
                return items;
            }

            if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
                var hashCheck = {}, newItems = [];

                var extractValueToCompare = function (item) {
                    if (angular.isObject(item) && angular.isString(filterOn)) {
                        return item[filterOn];
                    } else {
                        return item;
                    }
                };

                angular.forEach(items, function (item) {
                    var valueToCheck, isDuplicate = false;

                    for (var i = 0; i < newItems.length; i++) {
                        if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
                            isDuplicate = true;
                            break;
                        }
                    }
                    if (!isDuplicate) {
                        newItems.push(item);
                    }

                });
                items = newItems;
            }
            return items;
        };
    });
})();

<!doctype html>
<html >
<head>
    <title>Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>

    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js"></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.js"></script>
    
</head>
<body ng-app="TypeaheadDemo">
    <div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">

        <div>
            <label>1. Without array value</label>
            <select ng-model="class" ng-options="item.category for item in questions"></select>
        </div>

        <div style="margin-top: 11px;">
            <label>2. With array value</label>
            <select style="margin-left: 20px;" ng-model="class" ng-options="item.user.displayName for item in questions"></select>
        </div>

        <div style="margin-top: 20px;">
            <label style="color: green;">3. Typeahead is Working Now:</label>
            <input ng-model="friend" typeahead-min-length="3" uib-typeahead="item as item.user.displayName for item in questions | filter : $viewValue | unique:'user.displayName'">
        </div>

        <div class="searchinput autosearchinput">
            <tags-input display-property="custName" add-on-enter="true" add-on-blur="true" add-from-autocomplete-only="true" placeholder="tag friends" ng-model="friends" title="tag friends">
                <auto-complete min-length='1' source="filterTags($query)"></auto-complete>
            </tags-input>
        </div>
    </div>
</body>
</html>

如何在输入字段中使用提前输入来获取 Angularjs 中的值？

How Can I Use typeahead in Input Filed to get the Values in Angularjs?

html

css

angularjs

meanjs