Home Explore Help
Register Sign In
seimin
/
itsm-whlg
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
itsm-whlg
/
bower_components
/
nya-bootstrap-select
/
docs
/
dist
/
partials
/
main
/
getting-started.html

getting-started.html 7.8 KB
Permalink History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 
  1. <section>
    2. 

  2.   <h1 id="getting-started">Getting started</h1>
    3. 

  3. <h3 id="different-from-1-x">Different from 1.x</h3>
    4. 

  4. <p>Unlike nya-bootstrap-select v1.x which is a wrapper for <a href="https://github.com/silviomoreto/bootstrap-select">Bootstrap-select</a>. This project
    5. 

  5. is a totally independent one which only fork most of the features of Bootstrap-select without any code dependency.</p>
    6. 

  6. <p>If you are using the 1.x and want migrate to 2.x. follow the <a href="#/main/migrate-instructions">migrate instructions</a>.</p>
    7. 

  7. <h2 id="dependencies-and-compatibility-">Dependencies and compatibility:</h2>
    8. 

  8. <p>This directive only requires AngularJS v1.2 or later and the css of Bootstrap. No other dependencies.</p>
    9. 

  9. <h2 id="installation-">Installation.</h2>
    10. 

  10. <p>Install via <a href="http://bower.io">Bower</a>.</p>
    11. 

  11. <pre><code class="lang-bash">$ bower <span class="hljs-operator"><span class="hljs-keyword">install</span> nya-bootstrap-<span class="hljs-keyword">select</span> <span class="hljs-comment">--save</span></span>
    12. 

  12. </code></pre>
    13. 

  13. <p>Load the script and css and other dependencies <strong>jquery and bootstrap script are not required!</strong> .</p>
    14. 

  14. <pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"bower_components/bootstrap/dist/css/bootstrap.css"</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span>&gt;</span>
    15. 

  15. <span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"bower_components/nya-bootstrap-select/dist/css/nya-bs-select.css"</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span>&gt;</span>
    16. 

  16. 

  17. <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"bower_components/angular/angular.js"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    18. 

  18. <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"bower_components/nya-bootstrap-select/dist/js/nya-bs-select.js"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    19. 

  19. </code></pre>
    20. 

  20. <p>make &#39;nya.bootstrap.select&#39; module as your application dependency.</p>
    21. 

  21. <pre><code class="lang-javascript">angular.<span class="hljs-keyword">module</span>(<span class="hljs-symbol">'myApp'</span>, [<span class="hljs-symbol">'nya</span>.bootstrap.select']);
    22. 

  22. </code></pre>
    23. 

  23. <h2 id="make-your-select-component-">Make your select component.</h2>
    24. 

  24. <p>In view file, use <code>nya-bs-select</code> as element, attribute or class to build an bootstrap select component. the <code>ng-model</code> is also required on the element.
    25. 

  25. To make your select options, you will need <code>nya-bs-option</code> directive to populate options from an collection, or you can using <code>nya-bs-option</code> as an class
    26. 

  26. of <code>&lt;li&gt;</code> element to make static options. If you are using static options, you should also add an value attribute on <code>&lt;li&gt;</code> element to explicitly set to value of each option.</p>
    27. 

  27. <example>
    28. 

  28. <file name="index.html">
    29. 

  29. <pre><code class="lang-html"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;bg-info&quot;</span>&gt;</span>model1 is </span><span class="hljs-expression"><span>{{</span><span class="hljs-variable">model</span>1<span>}}</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
    30. 

  30. <span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;bg-info&quot;</span>&gt;</span>model2 is </span><span class="hljs-expression"><span>{{</span><span class="hljs-variable">model</span>2<span>}}</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
    31. 

  31. <span class="hljs-tag">&lt;<span class="hljs-title">form</span>&gt;</span>
    32. 

  32.   <span class="hljs-comment">&lt;!-- options from collection --&gt;</span>
    33. 

  33.   <span class="hljs-tag">&lt;<span class="hljs-title">ol</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;dynamic-options&quot;</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;nya-bs-select&quot;</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">&quot;model1&quot;</span>&gt;</span>
    34. 

  34.     <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">nya-bs-option</span>=<span class="hljs-value">&quot;option in options&quot;</span>&gt;</span>
    35. 

  35.       <span class="hljs-tag">&lt;<span class="hljs-title">a</span>&gt;</span></span><span class="hljs-expression"><span>{{</span> <span class="hljs-variable">option</span> <span>}}</span></span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
    36. 

  36.     <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    37. 

  37.   <span class="hljs-tag">&lt;/<span class="hljs-title">ol</span>&gt;</span>
    38. 

  38.   <span class="hljs-comment">&lt;!-- options in static --&gt;</span>
    39. 

  39.   <span class="hljs-tag">&lt;<span class="hljs-title">ol</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">&quot;static-options&quot;</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;nya-bs-select&quot;</span> <span class="hljs-attribute">ng-model</span>=<span class="hljs-value">&quot;model2&quot;</span>&gt;</span>
    40. 

  40.     <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;nya-bs-option&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;alpha&quot;</span>&gt;</span>
    41. 

  41.       <span class="hljs-tag">&lt;<span class="hljs-title">a</span>&gt;</span>Alpha<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
    42. 

  42.     <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    43. 

  43.     <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;nya-bs-option&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;bravo&quot;</span>&gt;</span>
    44. 

  44.       <span class="hljs-tag">&lt;<span class="hljs-title">a</span>&gt;</span>Bravo<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
    45. 

  45.     <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    46. 

  46.     <span class="hljs-tag">&lt;<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">&quot;nya-bs-option&quot;</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">&quot;charlie&quot;</span>&gt;</span>
    47. 

  47.       <span class="hljs-tag">&lt;<span class="hljs-title">a</span>&gt;</span>Charlie<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
    48. 

  48.     <span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
    49. 

  49.   <span class="hljs-tag">&lt;/<span class="hljs-title">ol</span>&gt;</span>
    50. 

  50. <span class="hljs-tag">&lt;/<span class="hljs-title">form</span>&gt;</span></span>
    51. 

  51. </code></pre>
    52. 

  52. 

  53. </file>
    54. 

  54. <file name="script.js">
    55. 

  55. <pre><code class="lang-javascript">  <span class="hljs-variable">$scope</span>.options = [
    56. 

  56.     <span class="hljs-string">&#39;Alpha&#39;</span>, <span class="hljs-string">&#39;Bravo&#39;</span>, <span class="hljs-string">&#39;Charlie&#39;</span>, <span class="hljs-string">&#39;Delta&#39;</span>,
    57. 

  57.     <span class="hljs-string">&#39;Echo&#39;</span>
    58. 

  58.   ];
    59. 

  59. </code></pre>
    60. 

  60. 

  61. </file>
    62. 

  62. </example>
    63. 

  63. 

  64. <iframe class="runnable-example-frame" src="examples/getting-started-example-1/index.html"></iframe>
    65. 

  65. 

  66. </section>
    67. 

  67.