Populate скрытого поля с последним выбранным значением с помощью angular.js

Question

Итак, у меня есть этот код Fiddle

<div ng-app="testApp"> 
<div ng-controller="MainCtrl"> 
    <form> 
     <p> 
      <select ng-model="selectedItem" ng-options="i.name for i in items"></select> 
     </p> 
     <p ng-show="selectedItem.subItems"> 
      <select ng-model="selectedSubItem" ng-options="i.name for i in selectedItem.subItems"></select> 
     </p> 

     <p ng-show="selectedSubItem.subItems"> 
      <select ng-model="selectedSubSubItem" ng-options="i.name for i in selectedSubItem.subItems"></select> 
     </p> 

     <input type="hidden" name="selection" value="????"> 

     <input type="submit" value="submit"> 
    </form> 

</div> 

И в этом коде я только показать следующее выпадающее меню, если выбранный элемент имеет ребенок массив. Теперь я хочу заполнить значение скрытого поля последним выбранным значением этой выпадающей цепи, используя Angular.js.

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

Как я могу это сделать?

Answer 1

Это может сделать, если длина цепи фиксируется:

<input type="hidden" name="selection" 
    value="{{ (selectedSubSubItem || selectedSubItem || selectedItem).name }}"/> 

Чтобы решить эту проблему с выходом назад в цепи, простое решение заключается в использовании ng-change и свести на нет всех следующих значений, а именно:

<select ng-model="selectedItem" ng-options="i.name for i in items" 
    ng-change="selectedSubItem=null;selectedSubSubItem=null"></select> 

См раздвоенной скрипки: http://jsfiddle.net/zH77p/1/

---

В качестве альтернативы ng-change, вы можете использовать часы в области; преимуществом является то, что часы необходимо знать только их немедленного ребенка:

$scope.$watch("selectedItem", function(newval, oldval) { 
    if(newval !== oldval) $scope.selectedSubItem = null; 
}); 
$scope.$watch("selectedSubItem", function(newval, oldval) { 
    if(newval !== oldval) $scope.selectedSubSubItem = null; 
}); 

Answer 2

Вы можете использовать:

<input type="hidden" name="selection" value="{{selectedSubSubItem.name}}"> 

Двусторонний связывание будет обновлять значение скрытого ввода после того, как значение соответствующего select получает изменилось.

Если вы хотите, чтобы он динамически на основе последнего выбранного:

<input type="hidden" name="selection" value="{{selectedSubSubItem.name || selectedSubItem.name || selectedItem.name}}"> 

Если вы хотите, чтобы иметь возможность вернуться в цепи это поможет. Но я настоятельно рекомендую, чтобы переместить эту логику в контроллер:

<input type="hidden" name="selection" value="{{(selectedSubItem.subItems ? selectedSubSubItem.name : false) || (selectedItem.subItems ? selectedSubItem.name : false) || selectedItem.name}}"> 

Answer 3

Поскольку вы заинтересованы в этом типе «прикован выбора», вам нужно использовать некоторые более сложную логику. Вот скрипка: http://jsfiddle.net/2Az4P/3/ Я использовал нг-значение, но вы можете оставить свое значение и установить его на

value="{{choiceValue()}} 

, который будет иметь тот же эффект. То, что я сделал, это сделать ответы в массиве (selectedItem = []), а затем заполнить его, когда я иду (обратите внимание на ng-model каждого выбора).

При каждом выборе значение обновляется соответствующим образом с использованием функции choiceValue(), которая обновляет ng-value соответственно.

Таким образом, вы можете добавить столько цепей в цепочку и просто обновить их число (на самом деле вы можете использовать для этого ng-repeat и использовать $index для автоматического создания дополнительных уровней выбора).

Это немного больше работы, но вы можете увидеть основы здесь: http://jsfiddle.net/brendanowen/uXbn6/8/

Все зависит от того, насколько сложна/автоматизирован вам нужно сделать это :)