diff options
Diffstat (limited to 'doc/views/demo-disabling-enabling.htm')
| -rw-r--r-- | doc/views/demo-disabling-enabling.htm | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/doc/views/demo-disabling-enabling.htm b/doc/views/demo-disabling-enabling.htm new file mode 100644 index 0000000..737de31 --- /dev/null +++ b/doc/views/demo-disabling-enabling.htm @@ -0,0 +1,126 @@ +<div class="row"> + <div class="col-sm-12"> + + <h3 class="pageHeading">Demo > Disabling / Enabling</h3> + + <p> + You can disable the directive, as well as each selection item in it. + As you might have guessed, you can do this programmatically, on the fly. + When the directive is disabled, You can still toggle the dropdown button + and see the items, but some of the directive's button will be hidden. + </p> + + <br /> + <div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + + disable-property="disabled" + is-disabled="disableDir" + > + </div> + + <h5>Disable / enable the directive</h5> + <p> + Click one of the buttons below to disable or enable the directive. + </p> + <p> + <button type="button" class="btn btn-danger btn-xs" ng-click="disableDir = true" >Disable</button> + <button type="button" class="btn btn-success btn-xs" ng-click="disableDir = false" >Enable</button> + </p> + <h5>Disable / enable singular item</h5> + <p> + You need to use <code>disable-property</code> attribute to define which object is disabled / enabled. + Click one of the buttons below to disable or enable the first browser. + </p> + <p> + <button type="button" class="btn btn-danger btn-xs" ng-click="modernBrowsers[ 0 ].disabled = true" >Disable the first browser</button> + <button type="button" class="btn btn-success btn-xs" ng-click="modernBrowsers[ 0 ].disabled = false" >Enable the first browser</button> + </p> + + <br /> + <div role="tabpanel"> + + <!-- Nav tabs --> + <ul class="nav nav-tabs" role="tablist"> + <li role="presentation" class="active"><a data-target="#view" aria-controls="home" role="tab" data-toggle="tab">View</a></li> + <li role="presentation"><a data-target="#controller" aria-controls="profile" role="tab" data-toggle="tab">Controller</a></li> + </ul> + + <!-- Tab panes --> + <div class="tab-content"> + <div role="tabpanel" class="tab-pane active" id="view"> + <p>Define your directive:</p> + <pre><code><div + isteven-multi-select + input-model="modernBrowsers" + output-model="outputBrowsers" + button-label="icon name" + item-label="icon name maker" + tick-property="ticked" + ... + disable-property="disabled" + is-disabled="disableDir" +> +</div></code></pre> + </div> + <div role="tabpanel" class="tab-pane" id="controller"> + <p>Define your input-model:</p> + <div class="fauxCode hljs xml"> + $scope.modernBrowsers = [ + <table> + <tr class="hljs-tag" ng-repeat="row in modernBrowsers" > + <td> </td> + <td>{</td> + <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td> + <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td> + <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td> + <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td> + <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td> + </tr> + </table> + ]; + </div> + </div> + </div> + + </div> + </div> +</div> + +<div class="row"> + <div class="col-sm-12"> + <h5>Output model</h5> + <p> + Look at the <code>output-model</code> below to see the values getting updated + as you select / deselect an item in the directive. Icons in the objects are actually full HTML <code>img</code> tag, shortened for simplicity. + </p> + <div class="fauxCode hljs xml"> + $scope.outputBrowsers = [ + <table> + <tr class="hljs-tag" ng-repeat="row in outputBrowsers" > + <td> </td> + <td>{</td> + <td><span class="hljs-attribute">icon</span>: <span class="hljs-value">{{removeHost(row.icon)}}</span>,</td> + <td><span class="hljs-attribute">name</span>: <span class="hljs-value">{{row.name}}</span>,</td> + <td><span class="hljs-attribute">maker</span>: <span class="hljs-value">{{row.maker}}</span>,</td> + <td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td> + <td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td> + </tr> + </table> + ]; + </div> + </div> +</div> + +<script> + $(document).ready(function() { + $('pre code').each(function(i, block) { + hljs.highlightBlock(block); + }); + }); +</script> |