Угловой пользовательский стиль начальной загрузки, ng-модель, меняющаяся с объекта на строку

Question

У меня проблема с загрузкой пользовательского интерфейса Typeahead. Здесь plnkr, и объяснение ниже.

http://plnkr.co/edit/lvy1Xu13xfFBjHbIY68H?p=preview

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

Все работает, как ожидается, когда вы выбираете состояние из Typeahead. Вы выбираете весь объект, свойства «состояние» и «флаг» также выбираются. Проблема возникает, когда вы пишете строку, которая не соответствует ни одной из этих опций, перечисленных в Typeahead. Предположим, вы хотите создать состояние «myState». Тогда ng-модель является строкой, а не объектом, как при выборе одного параметра из typeahead, и невозможно ввести свойство флага, потому что вы не можете создать свойство в строке.

Можно ли каким-либо образом изменить настройки uib-typeahead или изменить ng-модель, сделать некоторую функцию, которая изменяет ng-модель от строки к объекту или что-то в этом роде?

<input type="text" ng-model="customPopupSelected" placeholder="state" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control"> 

<input type="text" ng-model="customPopupSelected.flag" placeholder="flag" class="form-control"> 

Здесь представлено упрощенное объяснение того, что я пытаюсь добиться. Когда я выбираю состояние из машинописных, состояние выглядит следующим образом:

state = { 
    "name": "Arizona", 
    "flag": "9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png" 
} 

Когда я начать печатать и введите состояние, которое не существует состояние является строкой.

state = "myState"

, так что я не в состоянии добавить новый «state.name», а затем добавить свойство «state.flag» для объекта состояния. Поэтому я хотел бы как-то обойти это и уметь создавать свои собственные государства, если это возможно.

state = { 
    "name": "myState", 
    "flag": "mystate-flag.svg.png" 
} 

Answer 1

Добавить машинописный редактируемые = "ложь" с UIB-машинописный

<input typeahead-editable="false" type="text" ng-model="customPopupSelected" placeholder="state" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control"> 

<input type="text" ng-model="customPopupSelected.flag" placeholder="flag" class="form-control"> 

Я надеюсь, что это поможет.

Answer 2

вы можете добавить $scope.$watch:

// listen to customPopupSelected variable changes 
$scope.$watch('customPopupSelected', function (nVal) { 
    // enter this block only if new value is not an object 
    if (nVal && angular.isString(nVal)) { 
    // convert customPopupSelected from a string to desired object 
    $scope.customPopupSelected = { 
     name: nVal, 
     flag: 'URL-TO-SOME-DEFAULT-FLAG' 
    }; 
    } 
}); 

вот ваш обновленный plunker: http://plnkr.co/edit/jezOW8SEJUh59CzwFpr8?p=preview