html - 如何在输入字段中使用 typeahead 来获取 Angularjs 中的值？

标签 html css angularjs meanjs

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

  • 在 plunker 中，第一个选择选项用于获取没有数组的值。

  • 第二个选择选项用于获取 user 数组中的值。所以我们使用了 ng-options="item.user.displayName for item in questions"

  • 但我们希望 typeahead 选项能够获取 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 的名称，它显示为三个 表 1 名称，如果我们的数据中有相同的名称，则意味着我们希望只显示一个名称，如 表 1 请帮助我们...请同时在 plunker 中更新您的答案以知道解决方案....谢谢

最佳答案

要使其正常工作，需要插件 - 我使用了 Typeahead of 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>

关于html - 如何在输入字段中使用 typeahead 来获取 Angularjs 中的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40804192/

上一篇：java - PHP - 为脚本/样式文件设置不同的目录

下一篇：javascript - 第二次点击时触发动画

相关文章：

jquery - 计算并显示在主div中被拖动到y轴后的div高度

javascript - 如何从地址栏中删除网络摄像头图标

javascript - 如何等到跟踪脚本触发后再重定向用户？

javascript - IE8中动态创建选择框选项问题

javascript - 如何在div内部对齐div中间

css - div 内的左/右浮动按钮

Css 样式在全 View 字母界面 Gmail 中不起作用

javascript - 非IE浏览器鼠标捕获？

php - 使用 ng-repeat 循环遍历格式类似于字符串的数组

angularjs - 将指令注入(inject) Controller

©2024 IT工具网  联系我们