Использование AngularJS для отображения div на основе значения select

Question

Использование AngularJS для отображения div на основе значения select

0

Я пытаюсь использовать значение элемента select HTML, чтобы показать или скрыть некоторые теги div с помощью AngularJS. Вот мой код:

<body ng-app="kiosk" id="ng-app" >
    <div class="page" ng-controller="kiosk-controller" ng-cloak="true">
        <section class="signin">

        <div class="intro">
            <h1 id="service-desk-name">{{servicedeskname}}</h1><br></br>
            <h4 id="welcome">{{welcome}}</h4>
        </div>

        <hr></hr>

        <form id="form" name="form">

            <div>
                <label>Do you have an ID?</label><br></br>
                <select type="select" 
                    ng-model="user.affiliated"
                    ng-required="true"
                    ng-options="opt as opt.name for opt in affiliate.affiliateOptions">
                    <option value="">--Select an answer--</option>
                </select>
            </div>

            <div ng-switch="user.affiliated">

            <div ng-switch-when="Yes"> 
                <!--><-->
            </div>
            <div ng-switch-when="No">
                <!--><-->
            </div>

            </div>

И вот фрагмент Javascript:

var kiosk = angular.module('kiosk',[]);

kiosk.controller('kiosk-controller', ['$scope', function($scope, $user) {
    $scope.servicedeskname = 'Service Desk';
    $scope.welcome = 'Please sign in and a consultant will be with you shortly.';

    $scope.affiliate = {affiliateOptions:[]};
    $scope.affiliate.affiliateOptions = [
        { name: 'Yes' },
        { name: 'No' }
    ];
/*other stuff*/
};

Я не могу найти правильный способ ссылки на опции выбора в тегах HTML, используя ng директивы. Если это не очень ясно, я хочу показать один div если значение выбора "Да", и показать другое, если значение выбора "Нет".

UnworthyToast 22 май 2016, в 23:41

Источник

Теги:

javascript

html

angularjs

ng-show

html-select

4 ответа

Ещё вопросы

SergioGeeK7 · Answer 1 · 2016-05-22T20-24-00.000Z

у вас просто небольшая ошибка. вы должны иметь user.affiliated.name вместо user.affiliated

like this 

<div ng-switch="user.affiliated.name">

        <div ng-switch-when="Yes"> 
           yes
        </div>
        <div ng-switch-when="No">
            no
        </div>

    </div>

Patrick · Answer 2 · 2016-05-22T20-12-00.000Z

Вы забыли свойство name в инструкции switch.

-    <div ng-switch="user.affiliated">
+    <div ng-switch="user.affiliated.name">

Как можно увидеть в jsfiddle

itamar · Answer 3 · 2016-05-22T19-42-00.000Z

Я считаю, что вы ищете ng-show и ng-hide.

            <div ng-show="user.affiliated === 'Yes'"></div>
            <div ng-show="user.affiliated === 'No'"></div>

И попробуйте изменить эту строку следующим образом:

            ng-options="opt.name as opt.name for opt in affiliate.affiliateOptions">

Да, я тоже пытался это использовать. Думаю, проблема в том, что я не знаю, что использовать слева или что использовать для выражения справа, чтобы получить доступ к вещам, с которыми я хочу проверить. Я попробую еще раз и посмотрю, делаю ли я что-то не так.
Это все еще не работает. Страница загружается без показа div, и независимо от того, какую опцию я нажимаю, они оба остаются невидимыми.
@UnworthyToast Первая вещь в выражении ng-options - это значение, которое получает <select>. Второе - это то, что отображается. Третий - это реальный объект в опции ng. Последний - итерация. Попробуйте изменить строку на то, что я поставил выше.

Yousef · Answer 4 · 2016-05-22T18-57-00.000Z

Я думаю, что использование оператора switch требует небольшой модификации

<div ng-switch on="user.affiliated">

            <div ng-switch-when="Yes"> 
                <!--><-->
            </div>
            <div ng-switch-when="No">
                <!--><-->
            </div>
</div>

проверьте эту документацию ng-switch для получения дополнительной справки