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