javascript - AngularJS - Заполнение других полей после ввода автозаполнения

0

Новинка для AngularJS. После долгой борьбы я обнаружил, как использовать Auto-complete в Angularjs.

Теперь при выборе значений из автозаполнения на основе выбранного значения необходимо заполнить другие поля. то есть. при загрузке экрана значения по умолчанию будут загружаться в текстовое поле 1 и текстовое поле 2. Когда пользователь выбирает новое значение с помощью автокомпьютера в текстовом поле 1, то соответствующее значение в тестовом поле 2 должно быть заполнено.

<table>
   <tr>
      <th>Project number</th>
      <th>Project Name</th>
   </tr>
   <tr ng-repeat="s in projectListObj">
      <td><input name="projects" type="text" placeholder="Project Number" ng-model="s.project_number" typeahead="s as s.project_number for s in projectData | filter:{project_number:$viewValue}" | limitTo:8" class="form-control"></td>
     <td><input type="text" name="proj-name" placeholder="Project Name" ng-model="s.project_name"/></td>
   </tr>
</table>

1 ответ

2
Лучший ответ

Вы можете поставить часы на свою ng-модель. Когда вы получаете изменения, вы, например, обновляете другие модели

$scope.$watch('BillDate1', function (newval, oldval) {
        verfifyDate();
        if (newval != undefined)
            $scope.SearchModel.OtherVal[0] = newval;
        if (newval == null)
            $scope.SearchModel.OtherValTwo[0] = '';
    });

В использовании шаблона гораздо более чистый способ

      <input type="text" name="Person Contacted" 
typeahead="a as a.Name for a in getCustomerContactDetails($viewValue)"
model="s.allCustomerContact.Name" typeahead-on-select='s.onSelectContactPerson(allCustomerContact.Name)' >

В вашем конкретном случае, я думаю, что вы хотите поставить целое на typeahead:

<td><input type="text" name="proj-name" placeholder="Project Name" ng-model="s"  uib-typeahead="r as r.project_name for r in projectData"/></td>

таким образом вы можете показать как номер, так и имя, поскольку вы указываете его в инструкции as. Вот плункер

https://plnkr.co/edit/MzYHvdQvZ5LALI3Ge2av?p=preview

Я использовал имя_проекта, поскольку он кажется более понятным с помощью typeahead

Надеюсь, поможет

  • 0
    Можете ли вы поделиться подробным примером для $ watch в s.project_number pls ????
  • 0
    Гораздо лучшая производительность, если вы используете typeahead-on-select. Чтобы узнать, какой элемент был изменен, вы можете передать модель. <input name="projects" type="text" placeholder="Project Number" ng-model="s.project_number" typeahead="r as r.project_number for r in projectData | filter:{project_number:$viewValue}" | limitTo:8" class="form-control" typeahead-on-select="methodInController(s.projectNumber)"></td>
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню