Angularjs implementation progress bar function example

Time:2021-6-9

This article mainly introduces the implementation of progress bar function in angularjs, and analyzes the principle, relevant knowledge points and precautions of the implementation of progress bar function in angularjs in the form of specific and complete examples, which can be referred to by friends in need

 

This paper describes the implementation of the function of progress bar with angularjs. The details are as follows:

1、 Function Description:

① Through the select tab, you can select different styles (colors) for the progress bar

② The progress of the progress bar is changed by the value in the text box (you can also quickly select several specific values)

③ Use the check box button to control whether the text on the progress bar is displayed

2、 Code implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

"en" ng-app='app'>
  "UTF-8">
  progress bar
  <code>'../js/angular.min.js'</code><code>>
  </code></div>
<div><code>    </code><code>.progress{</code></div>
<div><code>      </code><code>width:400px;</code></div>
<div><code>      </code><code>border:1px solid</code> <code>#ccc;</code></div>
<div><code>      </code><code>height: 28px;</code></div>
<div><code>      </code><code>text-align: center;</code></div>
<div><code>      </code><code>line-height: 28px;</code></div>
<div><code>      </code><code>font-weight: bold;</code></div>
<div><code>      </code><code>color:</code> <code>#fff;</code></div>
<div><code>      </code><code>overflow: hidden;</code></div>
<div><code>    </code><code>}</code></div>
<div><code>    </code><code>.Bar{</code></div>
<div><code>      </code><code>width:50%;</code></div>
<div><code>      </code><code>height: 28px;</code></div>
<div><code>      </code><code>background:</code> <code>#5BC0DE;</code></div>
<div><code>    </code><code>}</code></div>
<div><code>    </code><code>.blue{</code></div>
<div><code>      </code><code>background:</code> <code>#5BC0DE;</code></div>
<div><code>    </code><code>}</code></div>
<div><code>    </code><code>.red{</code></div>
<div><code>      </code><code>background:</code> <code>#D9534F;</code></div>
<div><code>    </code><code>}</code></div>
<div><code>    </code><code>.green{</code></div>
<div><code>      </code><code>background: green;</code></div>
<div><code>    </code><code>}</code></div>
<div><code>  </code><code>
'progresscontro'>
  "progress">
    "['Bar',vm.style]" ng-style="{width:vm.progress+'%'}">
      if='vm.text'>{{vm.progress}}%
  
  
    Color:
    'vm.style'>
      "red">red
      "green">green
      "blue">blue
    
  
  
  speed of progress:
    "number" ng-model='vm.progress' ng-change="vm.myFunc()">
    'vm.progress=0'>0%
    'vm.progress=20'>20%
    'vm.progress=40'>40%
    'vm.progress=60'>60%
    'vm.progress=80'>80%
  
  
  
    Display text:
    "checkbox" ng-model='vm.text'>
  
  </code></div>
<div><code>   </code><code>var</code> <code>app=angular.module(</code><code>'app'</code><code>,[]);</code></div>
<div><code>   </code><code>app.controller(</code><code>'progresscontro'</code><code>,</code><code>function</code><code>($scope){</code></div>
<div><code>      </code><code>var</code> <code>vm=$scope.vm={};</code></div>
<div><code>      </code><code>vm.style=</code><code>'blue'</code><code>;</code></div>
<div><code>      </code><code>vm.progress=50;</code></div>
<div><code>      </code><code>vm.text=</code><code>true</code><code>;</code></div>
<div><code>      </code><code>vm.myFunc=</code><code>function</code><code>(){</code></div>
<div><code>        </code><code>if</code><code>(vm.progress>100){</code></div>
<div><code>          </code><code>vm.progress=100;</code></div>
<div><code>        </code><code>}</code></div>
<div><code>        </code><code>if</code><code>(vm.progress<0){</code></div>
<div><code>          </code><code>vm.progress=0;</code></div>
<div><code>        </code><code>}</code></div>
<div><code>      </code><code>}</code></div>
<div><code>   </code><code>})</code></div>
<div><code>  </code><code>

Demo Preview:

3、 Knowledge point analysis

1、ng-class

Ngclass can be implemented in the following three ways:

(1) String form: if the expression evaluates to a string, the string should be one or more space separated class names.

1
<div ng-class="'red'">div>

explain:String form, only one class name can be bound at a time

(2) Array form: if the expression evaluates to an array, each element of the array should be a string, which is one or more space separated class names. As follows:

1
2
3
<div ng-class="['Bar',vm.style]" ng-style="{width:vm.progress+'%'}">
  <div ng-if='vm.text'>{{vm.progress}}%div>
div>

explain:An array can hold a variable, but a string can only hold a constant

(3) Object: if the expression evaluates to an object, the corresponding key is used as the class name for each key value pair of an object with a true value.

1
<div ng-class {'selected': isSelected, 'car': isCar}">

explain:When isselected = true, the selected class is increased; when iscar = true, the car class is increased,

2、ng-style

The attribute value of NG style is an object, and the content in the object is presented in the form of key > value. Key is the attribute and value is the value, as follows:

1
2
3
<div ng-class="['Bar',vm.style]" ng-style="{width:vm.progress+'%'}">
  <div ng-if='vm.text'>{{vm.progress}}%div>
div>

3、ng-if

The ng if instruction is used to remove the specified HTML element when the expression is false. When the expression is true, the removed HTML element is added and displayed as follows:

1
<div ng-if='vm.text'>{{vm.progress}}%div>

explain:When vm.text is true, the contents in the view will be displayed; otherwise, it will be removed

4、ng-model

The ng model instruction binds HTML form elements to the scope variable, as follows:

1
2
3
4
5
<select ng-model='vm.style'>
  <option value="red">redoption>
  <option value="green">greenoption>
  <option value="blue">blueoption>
select>

explain:In the select tab, the value of NG model is the value of the selected option

1
<input type="checkbox" ng-model='vm.text'>

I hope this article will be helpful to the design of angularjs program.

Original text:https://www.jb51.net/article/117920.htm