AngualrJS переключает блоки на выбор радио

Question

AngualrJS переключает блоки на выбор радио

0

https://jsbin.com/yikobayuqa/edit?html,js,output

У меня есть два блока кнопок checkboxes, которые мне нужно переключать между тем, что читает значение переключателя.

Код, который я написал, показывает каждый блок, если rel. радио было выбрано, но оно не скроется, когда выбран другой переключатель, который я пытаюсь сделать.

Содержимое контроллера

$scope.choosenTopLevelReason = false;
$scope.reportTopLevelReasons = [{
    title: "I do not think this should be on this site.",
    subReasons:[{
        title: "It is pornography",
        on: false
    },{
        title: "It is distasteful",
        on: false
    },{
        title: "It is spam",
        on: false
    }]
},{
    title: "This does not interest me",
    subReasons:[{
        title: "Hide this",
        on: false
    }]
}];

Частичный HTML

    <ul>
      <li ng-repeat="reportTopLevelReason in reportTopLevelReasons">
        <label><input type="radio" name="topLevelReason" value="{{reportTopLevelReason.title}}" ng-model="choosenTopLevelReason"> {{reportTopLevelReason.title}}</label>
        <ul ng-show="choosenTopLevelReason == reportTopLevelReason.title">
          <li ng-repeat="subReason in reportTopLevelReason.subReasons">
            <label>
              <input type="checkbox" ng-model="subReason.on" ng-checked="subReason.on">
              {{subReason.title}}
            </label>
          </li>
        </ul>
      </li>
   </ul>

Может ли кто-нибудь помочь?

John 23 авг. 2015, в 18:33

Источник

0

Вы работаете только с двумя вариантами радио? Вы можете добавить ng-hide к каждому из них, ссылаясь на условное выражение другого. Поэтому, когда один показывает, другой должен спрятаться
vkuo 23 авг. 2015, в 15:58
0

Я попытался добавить ng-hide для дочернего ul, но это не сработало .. я не понимаю почему ..
John 23 авг. 2015, в 16:04
0

$ scope.chosenTopLevelReason как bool, я думаю, что здесь не имеет значения, я установил пустую строку на всякий случай, но теперь радость. В сущности, я пытаюсь добиться скрытия дочернего элемента ul, когда родительское радио не выбрано. Проверьте jsbin .. это имеет мало смысла для меня
John 23 авг. 2015, в 16:05

Показать ещё 1 комментарий

Теги:

angularjs

1 ответ

Ещё вопросы

Вы работаете только с двумя вариантами радио? Вы можете добавить ng-hide к каждому из них, ссылаясь на условное выражение другого. Поэтому, когда один показывает, другой должен спрятаться
Я попытался добавить ng-hide для дочернего ul, но это не сработало .. я не понимаю почему ..
$ scope.chosenTopLevelReason как bool, я думаю, что здесь не имеет значения, я установил пустую строку на всякий случай, но теперь радость. В сущности, я пытаюсь добиться скрытия дочернего элемента ul, когда родительское радио не выбрано. Проверьте jsbin .. это имеет мало смысла для меня

Claies · Accepted Answer · 2015-08-23T15-29-00.000Z

Это происходит из-за того, что JavaScript Prototype Inheritance влияет $scope.

В частности, вы привязываетесь к примитивному объекту $scope.choosenTopLevelReason. Каждая итерация ng-repeat создает новую унаследованную область, а присвоение chosenTopLevelReason внутри ng-repeat скрывает родительский примитив. Поэтому каждый радиокнопка просматривает свою собственную копию chosenTopLevelReason.

Изменение этого объекта вместо примитива решает эту проблему.

$scope.choosenTopLevel = {};


<li ng-repeat="reportTopLevelReason in reportTopLevelReasons">
    <label><input type="radio" name="topLevelReason"
                  value="{{reportTopLevelReason.title}}" 
                  ng-model="choosenTopLevel.Reason">
        {{reportTopLevelReason.title}}</label>
    <ul ng-show="choosenTopLevel.Reason == reportTopLevelReason.title">
....

https://jsbin.com/sojolacumo/1/edit?html,js,output

Кроме того, ваш элемент <input> в этом примере неверен (отсутствует </input>), хотя это не вызывает проблемы здесь.

Я рекомендую внимательно прочитать Что такое нюансы объема прототипа/прототипического наследования в AngularJS? для глубокого погружения в то, почему примитив действует так, как он есть в этом сценарии.

Ух ты! офигенный ответ, большое спасибо!
@ Джон, это тот случай, когда угловая мантра «всегда используй точку в ng-модели» является наиболее подходящей; Я пытаюсь пойти еще дальше и научить / поощрять людей использовать синтаксис «Контроллер как», поскольку этот синтаксис автоматически создает области объекта.