2016-06-03 2 views
1

Здесь я создаю ниспадающее меню и настройки по умолчанию value.And это мой объектустановленного значения по умолчанию, используя условие angularjs

$scope.currentprop={ 
      name : "graphFillDirection", 
      members : [{ 
       name : "ttb", 
       caption : "Top to Bottom", 
      }, { 
       name : "btt", 
       caption : "Bottom to Top" 
      }, { 
       name : "ltr", 
       caption : "Left to Right" 
      },{ 
       name : "rtl", 
       caption : "Right to Left" 
      } 
      ], 
      value : "ttb", 
      //suppose it is : value:"" 
     } 

В этом объекте я быть_наст members массива и свойство value. Поэтому проверка с iteraing members.name и value собственности, и это мой html.

<select ng-model="currentprop.value" ng-options="value.name as value.name for (key,value) in currentprop.members" ng-selected="{{currentprop.value == value.name}}"></select> 


если случае currentprop.value == value.name матчей, то я установить значение нг-модель. Мой вопрос: если currentprop.value будет как value:"", то итерационное значение никогда не будет соответствовать currentprop.value. так что мне нужно, если value:"", то я установил members[0].name в ng-модель. некоторые, пожалуйста, помогите мне. plnkr здесь

ответ

2

Попробуйте ng-init в select:

<select ng-model="currentprop.value" 
    ng-init="currentprop.value = currentprop.value || currentprop.members[0].name" 
    ng-options="value.name as value.name for (key,value) in currentprop.members" 
    ng-selected="{{currentprop.value == value.name}}"> 
</select> 

Working plunker

+0

'ng-init' приятно, но медленно .. не используйте это очень часто. Благодарю. – Max

+0

На самом деле это большое улучшение - уменьшите количество фильтров и кучу, если такие директивы, как (ng-init, ng-mouseover, ng-mouseleave, ng-include), это супер неэффективно – Max

+0

Разработчики использовали обработчики событий 'window/document.onload' в JQuery/javascript какое-то время. 'ng-init' работает одинаково. Не является неэффективным. – Sajal

1

Вы можете установить currentprop.value для членов [0] .name в Ctrl:

$scope.currentprop={ 
     name : "graphFillDirection", 
     members : [{ 
      name : "ttb", 
      caption : "Top to Bottom", 
     }, { 
      name : "btt", 
      caption : "Bottom to Top" 
     }, { 
      name : "ltr", 
      caption : "Left to Right" 
     },{ 
      name : "rtl", 
      caption : "Right to Left" 
     } 
     ], 
     value : "", 
    }; 
$scope.currentprop.value = $scope.currentprop.value=="" ? $scope.currentprop.members[0].name : $scope.currentprop.value; 
1

Если currentprop.value не может быть изменен на "" во время жизни приложения после загрузки, то это решение будет работать идеально подходит для вас:

$scope.currentprop={ 
     name : "graphFillDirection", 
     members : [{ 
      name : "ttb", 
      caption : "Top to Bottom", 
     }, { 
      name : "btt", 
      caption : "Bottom to Top" 
     }, { 
      name : "ltr", 
      caption : "Left to Right" 
     },{ 
      name : "rtl", 
      caption : "Right to Left" 
     } 
     ], 
     value : "", 
    }; 

$scope.currentprop.value = $scope.currentprop.value || $scope.currentprop.members[0].name; 

Если он может меняться после того, как контроллер инициализируется вам нужно сделать что-то вроде этого:

$scope.$watch('currentprop.value', function(value) { 
    if (value !== '') { 
    $scope.currentprop.value = $scope.currentprop.members[0].name; 
    } 
}); 

Примечание: если вы добавляете наблюдателя, то вам не нужно добавлять $scope.currentprop.value = $scope.currentprop.value || $scope.currentprop.members[0].name; из первого примера, vecause watcher автоматически запускается при инициализации.

Оптимизация

ng-options Также может быть упрощена ng-options="value.name as value.name for value in currentprop.members"

Вам не нужно добавлять ng-selected в то время как у вас есть ng-model в <select>. ng-model автоматически выбирает параметры.

По умолчанию placeholde

Если вам нужен параметр по умолчанию, чтобы быть заполнителем, как "Выбор элемента", вы можете сделать это:

<select ng-model="currentprop.value" 
     ng-options="value.name as value.name for value in currentprop.members"> 
    <option value="">Select a member</option 
</select> 
Смежные вопросы