Выберите тег, который не работает должным образом с Anuglar

Question

Я строю форму с использованием углового. в моей форме, есть тип select в качестве тега.

Ниже мой код:

 <div class="form-group" ng-class="{ 'has-error': form.$submitted && form['{{field.id}}'].$invalid }" ng-if="field.type === 'select'"> 
      <select> 
        <div class="" ng-repeat="value in field.values"> 
         <option value="">{{value.title}}</option> 
        </div> 
      </select> 
     </div> 

А вот файл для JSON field.values:

"values": [ 
           { 
            "id": 0, 
            "title": "Not Selected" 
           }, 
           { 
            "id": 1, 
            "title": "Yes" 
           }, 
           { 
            "id": 2, 
            "title": "No" 
           } 
          ] 

Javascript (сделанные изменения):

app.controller ('I129Ctrl' , ['$ scope', '$ http', 'JSONModelsService', функция ($ scope, $ http, JSONModelsService) {

var formData = {}; 

    $scope.groups = []; 
    $scope.sections = []; 
    $scope.fields = []; 

    //below is basically equivalent to routing 
    JSONModelsService.get(['test', 'Valid Passport']) 
     .then(function (response) { 
      console.log(response); 
      // $scope.group = response.data.groups[0]; 
      $scope.groups = response.data.groups; 
      $scope.sections = $scope.groups.sections; 
      $scope.fields = $scope.groups.sections.fields; 
     }); 

В принципе, я сначала проверяю, равен ли field.typeselect. Если это так, я хочу, чтобы значения в выбранном типе вопроса. Однако он не работает, как я себе представляю. Что я делаю не так?

Answer 1

Во-первых, не используйте элемент div в элементе, который не может работать. Вы можете поместить ng-repeat на уровне параметра, но это не сработает, так как у вас нет привязки к ней.

Способом выполнения этого является директива ng-options в теге select.

<select ng-model="valueSelected" ng-options="value as value.title for value in field.values"></select> 

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

<option ng-value="null">-- No value--</option>