2013-06-21 3 views
0

Пожалуйста, помогите реализовать такую ​​функциональность. Если значение параметра == 1, скройте форму ниже.AngularJS - Скрыть форму, когда значение опции выбора равно определенному значению

<select ng-model="selection"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
<select> 

<form ng-hide="isHidden"> <!-- Form to be hidden when option value == 1 --> 
    <!-- Some html code here... --> 
</form> 

Это часть контроллера.

$scope.isHidden = true; 

if($scope.selection == '1'){ 
    $scope.isHidden = false; 
} 

Текущий код не работает. Пожалуйста, помогите мне реализовать это. Благодарю.

ответ

3

Вы можете просто обратиться к selection в ng-hide директивы:

<form ng-hide="selection == '1'"> 
    <!-- Some html code here... --> 
</form> 

Вот working example.

+0

Я вижу. Так вот как это работает. Большое спасибо. Просто начал изучать AngularJS. :) – sharic19

1

Вы можете добавить watch собственности выбор:

$scope.$watch('selection',function(newValue){ 
    $scope.isHidden = newValue != '1'; 
}); 
+0

Он также работает. Спасибо, что поделились своими знаниями. :) – sharic19

0

Вы должны обработать событие изменения и поместить всю свою логику в свои файлы JavaScript. Это не только отделяет ваши проблемы, но и облегчает отладку. Вы можете использовать $ scope. $ Watch и обрабатывать всю вещь ненавязчиво в контроллере, но поскольку ваша логика будет манипулировать ui, лучше иметь некоторый намек на ui ng-change для некоторых других программистов логики. Это предотвратило бы такие ситуации, как «где была форма?» за которым следует час поиска логики.

HTML:

<form name="myForm"> 
    <select ng-model="selection" ng-change="handleSelectionChange()"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
    <select> 
</form> 

Контроллер:

$scope.handleSelectionChange = function(){ 
    if($scope.selection=='1'){ 
     document.myForm.style.display = 'none'; 
    } 
};` 

Я не могу проверить работоспособность кода на моем мобильном телефоне, так что пока я не могу, пусть эту работу как идея подхода. Я проверю код, как только попаду на рабочий стол.