Dar um valor a um ng-model=" searchText " input baseado no item da lista clicado em JS angulares

Question

Dar um valor a um ng-model=" searchText " input baseado no item da lista clicado em JS angulares

eu criei uma lista que é pesquisável com uma entrada usando angular.js (ng-model= "searchText"). Ao carregar nos elementos da lista, poderá obter o conteúdo do item seleccionado usando {{selected / json}}. Eu quero aplicar este elemento selecionado como o valor da entrada quando um item da lista é clicado.

eu essencialmente quero criar o meu próprio autocomplete que sempre mostra uma lista de Opções, Opções de filtros durante a digitação, e preenche a entrada no clique de um Opcao.

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

1

javascript angularjs filter autocomplete

Author: Mcestone, 2013-04-15

Source

1 answers

score 3 · Accepted Answer

Acho que tens alguns erros no código.

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

Shoud be

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

Então acho que o que queres é ...

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

Além disso, não sei para que serve o modelo ng no div, tanto quanto sei é usado apenas para entradas, áreas de texto e selecciona. Ver http://docs.angularjs.org/api/ng.directive:ngModel.

Deves querer algo como este violino. http://jsfiddle.net/weSpW/3/.