mercredi 28 juin 2017

AngularJS - add a checkbox to a widget

How do I add a checkbox to a widget in AngularJS?

I have a widget displayed on one of my webpages- the widget currently displays a couple of alarms whenever the alarms are raised (i.e. it's watching the value of a couple of variables- when those variables reach a certain value, the alarms are raised, and displayed on the widget).

What I want to do now, is add a checkbox to the widget, to toggle whether or not the alarms should be displayed on the widget. The HTML for the widget is:

<div data-ng-if="widget.name === 'umw-tag-box'">
    <div class="divider"></div>
    <div class="row">
        <div class="form-horizontal">
            <label class="col-sm-4 control-label-left" data-i18n="Tag:"></label>
            <div class="col-sm-8">
                <tags-input max-tags="1"
                            min-length="1"
                            key-property="tag"
                            display-property="tag"
                            template="tagItem.html"
                            um-max-tags-strict="true"
                            data-ng-model="widget.tag"
                            placeholder="Start typing a tag name"
                            replace-spaces-with-dashes="false"
                            on-tag-adding="onAddingTagItem($tag)"
                            on-tag-added="warning.tag = undefined"
                            um-tags-input-warning=""
                            data-ng-class="{'hide-tags-input': widget.tag.length > 0}">
                    <auto-complete min-length="1"
                                   load-on-focus="true"
                                   load-on-empty="true"
                                   display-property="tag"
                                   template="autocomplete.html"
                                   source="autocompleteTagsFilter($query)">
                    </auto-complete>
                </tags-input>
            </div>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row">
        <div class="form-horizontal">
            <label class="col-sm-4 control-label-left" data-i18n="Background color:"></label>
            <div class="col-sm-8">
                <um-color-picker color="widget.color"></um-color-picker>
            </div>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row">
        <div class="form-horizontal">
            <label class="col-sm-4 control-label-left" data-i18n="Background icon:"></label>
            <div class="col-sm-8 ">
                <um-icon-picker icon="widget.icon"></um-icon-picker>
            </div>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row ui-checkbox-row">
        <label class="col-sm-4 col-xs-6" data-i18n="Flip:"></label>
        <div class="col-sm-8 col-xs-6">
            <label class="ui-checkbox">
                <input type="checkbox" ng-model="widget.flip">
                <span></span>
            </label>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row" ul-scroll-modal-to-me="focusDesc">
        <div class="form-horizontal">
            <label class="col-sm-4 control-label-left" data-i18n="Description:"></label>
            <div class="col-sm-8">
                <input type="text" class="form-control input-sm" ng-model="widget.description"
                       data-ng-focus="focusDesc = true" data-ng-blur="focusDesc = false">
            </div>
        </div>
    </div>
</div>

Inside the widget HTML, there is already what appears to be markup for a checkbox, though I can't actually see that on the page anywhere...

<div class="row ui-checkbox-row">

I tried adding a similar line inside the umw-tag-box div, and inside the divs a couple of levels below that, but couldn't get the checkbox to appear no matter where I placed it...

What is the best way to add a checkbox to the widget?




Aucun commentaire:

Enregistrer un commentaire