Как использовать ng-if с переключателями?

Question

Как использовать ng-if с переключателями?

0

Это должен быть простой вопрос.

У меня возникли проблемы с использованием ng-if с переключателями. Это мои кнопки:

<label class="radio-inline">
    <input type="radio" id="day_month" ng-model="day_month" name="inlineRadioOptions" value="option1"> day of the
    month
</label>
<label class="radio-inline">
    <input type="radio" id="day_week" ng-model="day_month" name="inlineRadioOptions" value="option2"> day of the
    week
</label>

Как я могу использовать ng-if чтобы показать что-то, если выбран первый переключатель?

T. Ferreira 21 июль 2016, в 19:28

Источник

Теги:

javascript

angularjs

3 ответа

Ещё вопросы

daan.desmedt · Answer 1 · 2016-07-21T13-47-00.000Z

day_month модель day_month будет обновляться после выбора со value ввода. Проверка значения, равного значению, даст вам возможность проверить, был ли выбран вход. См. Пример ниже.

<label class="radio-inline">
    <input type="radio" id="day_month" ng-model="day_month" name="inlineRadioOptions" value="option1"> day of the
    month
</label>
<label class="radio-inline" ng-show="day_month == 'option1'">
    <input type="radio" id="day_week" ng-model="day_month" name="inlineRadioOptions" value="option2"> day of the
    week
</label>

Это с двумя равными или тремя? Т.е. == или === ? В любом случае, это не работает. Я делаю что-то неправильно?
Используйте ng-show вместо ng-if . Смотрите jsfiddle.net/nyrzdjdg/1
К сожалению, я не заметил, что вы использовали ng-show . Во всяком случае, я попробовал, и это тоже не сработало. У меня есть другие условия, и они работают нормально с ng-if или ng-show . Только когда я добавляю это условие, оно перестает работать.
Смотрите jsfiddle для примера. Вы можете изменить jsfiddle, чтобы он соответствовал вашей проблеме, так что мы можем посмотреть дальше :)

Shyam Mohan · Answer 2 · 2016-07-21T16-10-00.000Z

Похоже, вам нужно показать и скрыть некоторые материалы, основанные на выборе переключателя. Мы можем напрямую привязать логическое значение к флажку и сделать это очень легко. Если вы хотите сделать это с помощью переключателя, найдите решение ниже. HTML:

<body ng-app="app">
<div ng-controller="PageController">
<label>
    <input type="radio"  ng-model="color.name" value="Red"> Red
</label>
<label>
    <input type="radio"  ng-model="color.name" value="Green"> Green
</label><br>
<div ng-if="color.name==='Red'?true:false">
Hidden Message
</div> 
</body>

Контроллер Angualr:

var app =angular.module("app",[]);
app.controller("PageController",function($scope){
$scope.color={name:'Green'};

});

Рабочий пример https://jsfiddle.net/mshyam83/q8vbbd8q/5/

zzzzBov · Answer 3 · 2016-07-21T14-50-00.000Z

Ваша модель будет обновлена любым значением в атрибуте [value], поэтому вы можете проверить данные, хранящиеся в любой переменной, указанной в ng-model:

<div ng-if="day_month === 'option1'">...example...</div>

Это то, что я должен был сделать, но это не работает для меня, я не знаю почему. Это работает для вас?