Поиск в AngularJS с вводом текста, нажатие на элемент списка должно соответствующим образом обновить текстовое поле и скрыть список

Question

Я все еще сталкиваюсь с AngularJS и не могу найти ничего похожего на мою проблему.В основном я фильтрую список названий станций с помощью текстового поля, и каждый из элементов списка отображается в виде кнопки.

Когда пользователь нажимает кнопку, он также должен обновить текстовое поле с этим значением.как скрыть список снова.Я пытался использовать 'ng-click' на кнопках и нацеливать их на поля ввода, но не могу заставить это работать, хотя ошибки нет.Буду очень признателен за любую помощь, или предложения, если я пойду неправильно.Большое спасибо:)

HTML

<div ng-app="myApp" ng-controller="searchCtrl">
  <input type="text" ng-model="txtSearch" placeholder="From" id="one">
    <ul>
      <li ng-if="txtSearch" ng-repeat="test in List1 | filter:txtSearch track by test.id">
      <button>{{ test.name }}</button>
      </li>
    </ul>

<hr>

    <input type="text" ng-model="txtSearch2" ng-change="CallSearch(txtSearch2)" placeholder="To">
    <ul>
      <li ng-repeat="test in List2 track by test.id">
      <button>{{ test.name }}</button>
      </li>
    </ul>
</div>

JS

var app = angular.module('myApp', []);

app.controller('searchCtrl', function($scope) {
  $scope.List1 = [
    {id: 1, name: 'Uxbridge'},
    {id: 2, name: 'West Drayton'},
    {id: 3, name: 'Hayes'},
    {id: 4, name: 'Hillingdon'},
    {id: 5, name: 'Ealing'},
    {id: 6, name: 'Southall'},
    {id: 7, name: 'Harrow'},
    {id: 8, name: 'Eastcote'},
    {id: 9, name: 'Ruislip'},
    {id: 10, name: 'Hounslow'}
  ];

  $scope.CallSearch = function(textSearch) {console.log(textSearch.length);
    if (textSearch.length > 0) {
      $scope.List2 = $scope.List1.filter(function (item) {
        return Object.keys(item).some(function (key) {
          return angular.isString(item[key]) && item[key].toLowerCase().search(textSearch) !== -1
        });
      });
    }
    else {
      $scope.List2 = [];
    }
  }
});

Answer 1

Вы были правы в первый раз: вам нужно обработать эту логику, вызвав функцию с ng-click

Ваша кнопка может выглядеть так:

<button ng-click="addStation(test)>{{test.name}}</button>"

И в вашем контроллереВаша функция может быть такой:

function addStation(station) {
  $scope.txtSearch = station
  $scope.List2 = [] 
}