Хитрый подход при разборе объекта с 2 свойствами на 2 отдельные модели в AngularJS

Question

Хитрый подход при разборе объекта с 2 свойствами на 2 отдельные модели в AngularJS

0

У меня есть этот код

<input ng-model="attribute.name" typeahead="property as property.name for property in MyObject | filter:{ paramName:$viewValue }">

MyObject - это

{ name : 'A',
  desc : 'A description'
}

attribute.name должно оставаться простой строкой. Однако, с приведенным выше кодом, attribute.name становится объектом, который я не хочу. Поэтому я изменил код на

<input ng-model="attribute.name" typeahead="property.name as property.name for property in MyObject | filter:{ paramName:$viewValue }">

Все отлично работает, пока мне не понадобится отображать "desc" key. Это не должно быть в ng-модели, но пока я могу это сделать, это было бы хорошо. Мне не нужна двусторонняя привязка для "desc", потому что я хочу, чтобы данные были доступны для редактирования в свободной форме.

Теперь, когда я возвращаю свойство property.name, которое больше не является объектом, как мне получить доступ к клавише "desc"?

devwannabe 25 июнь 2015, в 21:11

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

Mateus Leon · Accepted Answer · 2015-06-25T21-39-00.000Z

Посмотрите на последний пример на странице typeahead: https://angular-ui.github.io/bootstrap/#/typeahead.

Мне нужно:

1 - Измените свое выражение, чтобы объект завершился, но выбрав только требуемое свойство. Кроме того, используя ngModel.$viewValue чтобы предоставить строку для фильтрации. Так:

<input ng-model="attribute.name"
    typeahead="property as property.name for property in MyObject | filter:{name: $viewValue}">

2 - Определите шаблон для отображения результатов. Вам необходимо настроить шаблон в этом шаблоне, следуя правилам, чтобы показать результаты правильно. Одним из примеров этого является:

<script type="text/ng-template" id="resultPattern.html">
    <div>
        <span ng-bind="match.name | typeaheadHighlight:query"></span><br>
        <small ng-bind="match.desc"></small>
    </div>
</script>

3 - Конечный тег input будет:

<input ng-model="attribute.name"
    typeahead="property as property.name for property in MyObject | filter:{name: $viewValue}" typeahead-template-url="resultPattern.html">

Изменить 1:

Вы были правы, я ошибся на шаге 3:

<input ng-model="attribute.name"
    typeahead="property.name as property for property in MyObject | filter:{name: $viewValue}" typeahead-template-url="resultPattern.html">

Вот Plunkr: http://plnkr.co/edit/pcjV40KxkBFdyIM3L0M4?p=preview

Изменить 2:

Я обновил Plunkr с помощью функции обратного вызова, используемой для обработки выбора после него: http://plnkr.co/edit/pcjV40KxkBFdyIM3L0M4?p=preview

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

Проблема с вашим кодом на номер 3 (так же, как мой самый верхний код) состоит в том, что модель attribute.name будет заполняться объектом, а не строкой. На странице браузера будет отображаться значение имени, но в $ scope.attribute.name это объект, содержащий name и desc. Так почему же он показывает только имя на веб-странице? Он показывает только значение имени из-за фильтра. Я объяснил выше в своем посте, почему это не сработает.
Мне очень жаль, возможно, мой пост был запутанным и неполным. У меня нет никаких проблем с отображением предложений / напечатано. Я обновлю свой пост. У меня проблема в том, что после того, как я нажал на выбор, я не могу присвоить значение «desc» другой модели. Я на самом деле думаю вернуться к своему старому коду (верхнему коду), а затем прямо перед тем, как сделать $ htttp.post, я очистю данные, чтобы он удалил объект, и просто использовал значение «name».
Я думал , что вы хотите , решение , чтобы выбрать name и показать desc на typeahead поле ... Я сделал это на Plunkr. Вам нужно получить desc и использовать его в своем коде тоже?
Да, описание будет отображаться в другой части веб-страницы.
Посмотрите на новый Edit 2 на ответ, я думаю, это то, что вам нужно =)
Это действительно приятно! Я также попробовал решение, которое упомянул в своем последнем сообщении, и оно сработало! Тем не менее, ваше решение лучше :)