Angularjs - 用于更新SPAN的复选框

时间:2016-10-12 14:26:01

标签: javascript jquery html angularjs checkbox

感谢您的光临。

我是Angular的新手,我遇到了一些问题。

我有一些复选框,点击后会在SPAN标签内显示一些文字。

多数民众赞成。我无法让它发挥作用!

Default page

Selected Page

所以要澄清 - 当用户选中复选框时 - 图像上的文字会发生变化(添加边框)。

希望这是有道理的。

到目前为止,这是我的代码:

 <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 个答案:

答案 0 :(得分:0)

如果您希望在模型更改之上显示或隐藏某些内容,则需要对该内容使用ng-if / ng-show / ng-hide。像这样:

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