Question

我在我的应用程序中使用MEAN堆栈，将AngularJS作为我的前端。我如何在输入字段中使用typeahead来获取angularjs中的值，实际上如果我们使用select选项我们得到的值，但我们期望提前输入选项...请查看plunker以获取参考My Plunker。

在plunker中首先选择用于获取无数组值的选项。
第二个选择选项用于获取user数组中的值。所以我们使用ng-options="item.user.displayName for item in questions"
但我们希望typeahead选项获取displayNmae数组中的user值。所以我们使用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>

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

Answer 1

为了使这个工作，它将需要插件 - 我使用了Typeahead UI Bootstrap

请找到问题的解决方案

(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>

如何在输入Filed中使用typeahead来获取Angularjs中的值？

1 个答案: