Angularjs - флажок для обновления диапазона

#javascript #jquery #html #angularjs #checkbox

#javascript #jquery #HTML #angularjs #флажок

Вопрос:

спасибо, что посмотрели.

Я новичок в Angular, и у меня возникли некоторые проблемы.

У меня есть несколько флажков, которые при нажатии отображают некоторый текст внутри тега SPAN.

Вот и все. Я просто не могу заставить его работать!

Страница по умолчанию

Выбранная страница

Итак, чтобы уточнить — когда пользователь устанавливает флажки — текст над изображением изменяется (добавляется граница).

Надеюсь, это имеет смысл.

Вот мой код до сих пор:

  <span id="PartyWall1" style="position:absolute;top:42px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 1</span>
        <span id="PartyWall2" style="position:absolute;top:345px; left:141px; font-weight:bold; color:red; font-size:12px;">Wall 2</span>
        <span id="PartyWall3" style="position:absolute;top:175px; left:85px; font-weight:bold; color:red; font-size:12px;">Wall 3</span>
        <span id="PartyWall4" style="position:absolute;top:175px; left:204px; font-weight:bold; color:red; font-size:12px;">Wall 4</span>




  <div class=" col-lg-12 col-md-12" ng-if="IsPartWall">
                            <div class="form-group form-group-icon-right">
                                <label>Which wall(s) are Party wall(s)? </label>
                                <div class="checkbox checkbox-small">
                                    <input name="cb1" id="cb1" type="checkbox" ng-model="objPostData.Wall1" tabindex="12" value="123"/>

                                    <label for="cb1">wall-1</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input type="checkbox" id="cb2" ng-model="objPostData.Wall2" tabindex="13" value="123" name="cb2"/>
                                    <label for="cb2">wall-2</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input type="checkbox" id="cb3" ng-model="objPostData.Wall3" tabindex="14" value="123" name="cb3"/>
                                    <label for="cb3">wall-3</label>
                                </div>
                                <div class="checkbox checkbox-small">
                                    <input type="checkbox" id="cb4" ng-model="objPostData.Wall4" tabindex="15" value="123" name="cb4"/>
                                    <label for="cb4">wall-4</label>
                                </div>
                            </div>
                        </div>

1. Пожалуйста, более подробно описывайте точное ожидаемое поведение и источник текста

2. «Я просто не могу заставить это работать» покажите, что вы пробовали… идея здесь в том, чтобы помочь исправить ваш код

3. Вы хотели, чтобы фактический текст изменился, или вы просто хотели, чтобы одна из стен была выделена, например, цвет изменился с красного на зеленый?

Ответ №1:

Если вы хотите, чтобы что-то отображалось или скрывалось поверх изменений модели, вам нужно использовать ng-if / ng-show / ng-hide для этого чего-то. Вот так:

 <span id="PartyWall1" ng-if="objPostData.Wall1">Wall 1</span>

1. думаю, они могут захотеть ng-class «добавить границу»

2. Я вижу, что там «будет отображаться некоторый текст внутри», а не что-то о стилизации 🙂

3. Спасибо, ребята. Смотрите фактический проект здесь. Вы увидите поведение, о котором я говорю.

4. Вам нужно будет выбрать «Деревянный каркас» из выпадающего списка «Тип конструкции», чтобы увидеть флажки. Также, если вы используете текстовые поля «ширина пола A» и «Ширина пола B», вы увидите, как это должно работать.