个人中心
gpt4 book ai didi

javascript - 具有结构化值的 AngularJS Typeahead

转载 作者：行者123 更新时间：2023-12-03 04:29:44 24 4
gpt4 key购买 nike

我有一个有效的 typeahead 元素，取自 here 中的示例。 ，非常简单并且完美运行。

现在，我的问题是我需要处理的数据实际上有两个数据元素，例如 {"Index":"<Index>","Value":"<Name>"} .

我需要在列表中显示一个类似 <index> - <Name> 的字符串，允许用户键入包括部分索引和/或值的任意组合，并且在选择后仅保留索引(这是列表中唯一唯一部分)。

我将上述示例中的列表修改为:

var States = JSON.parse('[{"Index":"1","Value":"Alabama"},      ' +
                        '{"Index":"2","Value":"Alaska"},        ' +
                        '{"Index":"3","Value":"Arizona"},       ' +
                        '{"Index":"4","Value":"Arkansas"},      ' +
                        '{"Index":"5","Value":"California"},    ' +
                        '{"Index":"6","Value":"Colorado"},      ' +
                        '{"Index":"7","Value":"Connecticut"},   ' +   
                        '{"Index":"8","Value":"Delaware"},      ' +
                        '{"Index":"9","Value":"Florida"},       ' +
                        '{"Index":"10","Value":"Georgia"},      ' +
                        '{"Index":"11","Value":"Hawaii"},       ' +
                        '{"Index":"12","Value":"Idaho"},        ' +
                        '{"Index":"13","Value":"Illinois"}]     '   ) ;

并将 HTML 设置为:

        <input name="states" 
               id="states" 
               type="text" 
               placeholder="enter a state" 
               ng-model="selected" 
               value="(state.Index)" 
               typeahead="(state.Value) for state in states | filter:$viewValue | limitTo:8" 
               class="form-control">

它没有完成这项工作。

总而言之，预先输入列表中的条目应如下所示:

1 - Alabama
2 - Alaska
...

当用户选择一个条目(比如第一个)时，脚本中收到的值应该是“1”(而不是“1 - Alabama”)。

编辑

我一对一地实现了下面 tanmay 建议的代码，但不知何故，它对我不起作用。而不是获取(例如)6 - Colorado我只得到一个- ，意味着没有数字(索引)也没有状态名称。有趣的是，显示的选项数量确实与我输入的内容相符(也就是说，如果我输入 m，我只会得到 - 的记录，该记录对应于阿拉巴马州)。

以下是完整的 HTML 和 JS 文件:

HTML:

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <meta name="viewpoint" content="with=device-width initial-scale=1.0">
        <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">

        <title>MyTest - Partial</title>
        <script src="Public_Libs/JQuery/jquery.js"></script>

        <script src="Public_Libs/Bootstrap/js/bootstrap.min.js"></script>
        <script src="Public_Libs/Bootstrap/js/bootstrap-select.min.js"></script>

        <link rel="stylesheet" href="Public_Libs/Bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="Public_Libs/Bootstrap/css/bootstrap-select.min.css">
        <link rel="stylesheet" href="Public_Libs/Bootstrap/css/bootstrap-theme.min.css">

        <script src="Public_Libs/Angular/angular.min.js"></script>
        <script src="Public_Libs/Angular/angular-route.min.js"></script>
        <script src="Public_Libs/Angular/angular-sanitize.min.js"></script>
        <script src="Public_Libs/Angular/angular-ui-bootstrap.min.js"></script>

        <script src="Index_Controller.js"></script>

    </head>

    <body>
        <div ng-app="angularTypeahead">
          <script type="text/ng-template" id="customTemplate.html">
            <a>
                <span bind-html-unsafe="match.label.Index | typeaheadHighlight:query"></span>   - 
                <span bind-html-unsafe="match.label.Value | typeaheadHighlight:query"></span>   
            </a>
          </script>
          <div class="container-fluid" ng-controller="TypeaheadCtrl">
              <h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo"> Angular.js Typeahead</h2>
              <div class="form-group">
                  <label for="states">Search for US States</label>
                  <input name="states" id="states" type="text" 
                         typeahead-template-url="customTemplate.html"
                         placeholder="enter a state" ng-model="selected" 
                         typeahead="state.Index as state for state in states | filter:$viewValue | limitTo:8" 
                         class="form-control">
              </div>
              <pre>{{selected}}</pre>
              <button class="btn btn-success" type="submit">Submit</button>
          </div>
        </div>        
    </body>
</html>

JS:

// https://angular-ui.github.io/

// setup app and pass ui.bootstrap as dep
var myApp = angular.module("angularTypeahead", ["ui.bootstrap"]);

// define factory for data source
  myApp.factory("States", function() {
    var states = JSON.parse('[{"Index":"1","Value":"Alabama"},      ' +
                          '{"Index":"2","Value":"Alaska"},        ' +
                          '{"Index":"3","Value":"Arizona"},       ' +
                          '{"Index":"4","Value":"Arkansas"},      ' +
                          '{"Index":"5","Value":"California"},    ' +
                          '{"Index":"6","Value":"Colorado"},      ' +
                          '{"Index":"7","Value":"Connecticut"},   ' +   
                          '{"Index":"8","Value":"Delaware"},      ' +
                          '{"Index":"9","Value":"Florida"},       ' +
                          '{"Index":"10","Value":"Georgia"},      ' +
                          '{"Index":"11","Value":"Hawaii"},       ' +
                          '{"Index":"12","Value":"Idaho"},        ' +
                          '{"Index":"13","Value":"Illinois"}]     '   ) ;

    return states;

});

// setup controller and pass data source
myApp.controller("TypeaheadCtrl", function($scope, States) {

  $scope.selected = undefined;

  $scope.states = States;

});

如何复制示例代码(请参阅 tanmay 答案中的链接)，使其对我不起作用？

最佳答案

我改变了你的input包含这样的自定义模板:

<input name="states" id="states" type="text" 
       typeahead-template-url="customTemplate.html"
       placeholder="enter a state" ng-model="selected" 
       typeahead="state.Index as state for state in states | filter:$viewValue | limitTo:8" 
       class="form-control">

模板看起来像这样:

<script type="text/ng-template" id="customTemplate.html">
  <a>
    <span bind-html-unsafe="match.label.Index | typeaheadHighlight:query"></span> - 
    <span bind-html-unsafe="match.label.Value | typeaheadHighlight:query"></span>   
  </a>
</script>

请注意，我使用了 States正如您提供的那样，我希望自定义模板有意义。

这是一个forked codepen这应该像你想要的那样。我有一个pre显示 ng-model在其下方仅包含数字(例如 4 )而不是整个 4 - <State>

编辑:或者更好的是，您仍然可以在input中显示州名称。并仅使用索引(按 selected.Index )。 Sample codepen为此。

关于javascript - 具有结构化值的 AngularJS Typeahead，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43535971/

24 4 0
文章推荐： javascript - 如何在单击按钮时获得ajax响应
文章推荐： javascript - 代码警报 'object Object'
文章推荐： javascript - 如何为传单中的featureGroup提供额外的选项？
文章推荐： javascript - 我想要在 li.. 内升序第二个 div？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com