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

【问题标题】：Give a value to an ng-model="searchText" input based on list item clicked in Angular JS根据在 Angular JS 中单击的列表项为 ng-model="searchText" 输入赋值
【发布时间】：2013-04-08 01:01:51
【问题描述】：

我使用 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>

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"
]
}

【问题讨论】：

如果我理解正确，你希望你过滤的输入值取被点击项的值吗？

标签： javascript autocomplete filter angularjs

【解决方案1】：

我认为你的代码有几个错误：

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

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

【讨论】：

这不是我的代码中的错误，我在顶部添加了我的 JSON，以便您查看。我做错了吗？
您用于重复的元素与您正在重复的数组相同 -> ng-repeat="cities in city" 应该是 ng-repeat="city in urban"
啊，我明白你在说什么。我更新了我的代码，谢谢。
@mcestone - 看看我发布的小提琴。也许这会对你有所帮助。
不客气，在你的例子中，你必须使用 $rootScope 来访问输入的模型，因为它不属于特定的控制器，但是，你应该更好地包含输入在初始控制器内部，因此您不必使用 $rootScope，例如 http://jsfiddle.net/weSpW/3/