javascript - 根据在 Angular JS 中单击的列表项，为 ng-model ="searchText"输入赋值-6ren

javascript - 根据在 Angular JS 中单击的列表项，为 ng-model ="searchText"输入赋值

转载作者：行者123 更新时间：2023-11-30 13:04:58

25

4

我使用 angular.js (ng-model="searchText") 创建了一个可通过输入进行搜索的列表。单击列表元素，您可以使用 {{selected | JSON}}。单击列表项时，我想将此选定元素应用为输入值。

我基本上想创建自己的自动完成功能，它始终显示选项列表，在键入时过滤选项，并在单击选项时填写输入内容。

HTML

<html ng-app> 
<section>
   <div id="content-body" class="container search-page"><!-- begin content-body -->
    <div id="content-frame" class="container"></div><!-- end content-frame -->
      <section>
        <div class="search-container">
          <div class="search-wrapper">
            <input type="search" class="input-from" autocomplete="off" placeholder="Search" ng-model="searchText" value="{{searchText}}">
          </div> 
        </div>
      </section>
      <section>
        <div ng-controller="ContentCtrl">
          <ul class="list-group search">
        <!--<li class="list-group-item group-title">
                <span class="icon itinerary-icon"></span>
                Popular Destinations
            </li>-->
              <a ng-click="setMaster(cities)" ng-repeat="city in cities | filter:searchText | limitTo:limit" href="#" class="list-group-item">{{city}}</a>
          </ul>
        </div>
      </section>
   </div><!-- end content-body -->
</html>

JS

function ContentCtrl($scope, $http) {
    "use strict";

    $scope.url = '../mobile-site/cities.json';
    $scope.cities = [];
    $scope.limit = 10; // max 10 cities loaded

    $scope.fetchContent = function() {
        $http.get($scope.url).then(function(response){
            $scope.cities = response.data.cities; 
        });
    }

    $scope.fetchContent(); // build cities list

    $scope.setMaster = function(city) {
            $scope.searchText = city; // pull selected city using {{selected | json}}
        }
    }

JSON

{
"version": "082B6AF45261B81358E8F99F0FAEC4A4",
"cities": [
"A Friela Maside, Spain",
"A Gudina, Spain",
"AHA, Germany",
"AL, Norway"
]
}

最佳答案

我认为你的代码有一些错误:

<div ng-model="chosen">
    <a ng-click="setMaster(cities)" ng-repeat="cities in cities | filter:searchText | limitTo:limit" href="#" class="list-group-item">{{cities}}</a>
</div>

应该是

<div ng-repeat="city in cities | filter:searchText | limitTo:limit">
    <a ng-click="setMaster(city)" class="list-group-item">{{city}}</a>
</div>

那我觉得你想要的是

$scope.setMaster = function(city) {
    $scope.searchText = city;
}

此外，我不确定 div 上的 ng-model 是做什么用的，据我所知它仅用于输入、文本区域和选择。参见 http://docs.angularjs.org/api/ng.directive:ngModel .

你可能想要这样的 fiddle -> http://jsfiddle.net/weSpW/3/ .

关于javascript - 根据在 Angular JS 中单击的列表项，为 ng-model ="searchText"输入赋值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16023236/

25

4

0

文章推荐： C# AppDomains 和线程

文章推荐： c# - 将 int[][] 转换为 int** 的最佳方法？

JavaScript 赋值
你能解释一下这个作业是如何完成的吗， var fe, f = document.forms[0], h; 哪个等于哪个。最佳答案以上等同于 var fe; var f = document.for
JavaScript 赋值()
据我测试，这两种方法都有效，但我不知道哪一种最好，也不知道它们之间的区别，这就是我想知道的。以下是两种方法: window.location = 'http://www.google.com'; w
python - Numpy字符串数组，赋值
我正在处理用字符串填充的 numpy 数组。我的目标是分配给第一个数组 a 的切片，值包含在较小尺寸的第二个数组 b 中。我想到的实现如下: import numpy as np a = np.em
带有虚拟占位符的 Perl 赋值
在我使用过的其他语言(如 Erlang 和 Python)中，如果我正在拆分字符串并且不关心其中一个字段，我可以使用下划线占位符。我在 Perl 中试过这个: (_,$id) = split('
javascript - 如何在没有构造函数的情况下为 "this"赋值
我认为这似乎很简单，但我对调用、应用、绑定(bind)感到困惑。等等我有一个事件监听器 red.addEventListener("click", function() { j = 0;
python - With-As 语句与 "="赋值？
这个问题在这里已经有了答案: What is the python "with" statement designed for? (11 个答案) 关闭 7 年前。使用有什么区别: iFile =
python - With-As 语句与 "="赋值？
这个问题在这里已经有了答案: What is the python "with" statement designed for? (11 个答案) 关闭 7 年前。使用有什么区别: iFile =
Haskell 赋值 - 将字符串拆分为单词所需的方向
几周前我们开始写一篇关于 Haskell 的论文，刚刚接到我们的第一个任务。我知道 SO 不喜欢家庭作业问题，所以我不会问怎么做。相反，如果有人能将我推向正确的方向，我将不胜感激。鉴于它可能不是一个特
c - 指针问题，赋值
我正在尝试为我的函数的变量根分配一个值，但似乎不起作用。我不明白这个问题。 hw7.c:155:7:警告:赋值使指针来自整数而不进行强制转换[默认启用] root = 负载(&fp, 大小); 此代码
c 赋值，对整数求平均值
我昨天花了大约 5 个小时来完成这个工作，并使用这个网站的帮助让代码可以工作，但我认为我这样做的方式是一种作弊方式，我使用了 scanf 命令。无论如何，我想以正确的方式解决这个问题。多谢你们!哦，代
c - 赋值，关于二维数组
我需要一些帮助来解决问题。我有这个文本文件: 我将文本内容输入到字符串二维数组中，并将其转换为整数二维数组。当我转换为 int 数组时，nan 被替换为零。现在，我继续查找二维数组中每行的最大值和最
c++ - 模板是否应该为仅移动不同类型的参数创建非右值引用构造函数/赋值？
假设我有一个只能移动的类型。我们停止现有的默认提供的构造函数，但 Rvalue 引用引入了一种新的“ flavor ”，我们可以将其用于签名的移动版本: class CantCopyMe { priv
javascript - 减少和对象解构/赋值
假设我有两个简单的对象，我想创建第三个对象来连接它们的属性。这非常有效: (()=>{ const a1 = {a: 2, b: 3} const b1 = {a: 100, c: 5}
Swift VAR 赋值
我想知道我是否可以稍后在这样的代码中为 VAR 赋值 var myView: UIView func createView() { myView = UIView() { let _view =
Javascript/HTML 赋值
我遇到了一些 Javascript/HTML/CSS 代码的问题。我对创建网站还很陌生，所以请多多包涵。我最终想做的是从 javascript 中提取一个动态值并使用它对一些 div(在容器中)进行
c++ - 为什么在设置对象等于另一个函数的返回值时调用移动构造函数/赋值
#include class Box{ public: int x; Box(){ x=0; std::cout No move construction thanks to RV
JavaScript bool 赋值
我发现在javascript中&=运算符是按位赋值: var test=true; test&=true; //here test is an int variable javascript中是否存在
c++ - 赋值=运算符重载
请帮助完成赋值重载函数的执行。这是指令: 赋值运算符 (=)，它将源字符串复制到目标字符串中。请注意，目标的大小需要调整为与源相同。加法 (+) 和赋值 (=) 运算符都需要能够进行级联运算。这意
c++ - 如何防止用继承的运算符[]赋值？
我有一个名为 SortedArrayList 的自定义结构它根据比较器对其元素进行排序，我想防止使用 operator[] 进行分配. 示例: 数组列表.h template class Array
只需一行 Python 赋值
我是 python 的新手，我看到了这种为列表赋值的形式 color= ['red' if v == 0 else 'green' for v in y] 但是如果我尝试用 3 个数字来做，例如 co

首页

博学

6Ren·AI

商城

javascript - 根据在 Angular JS 中单击的列表项，为 ng-model ="searchText"输入赋值