Angularjs的重要概念

阿李郎 發表於 2023-1-27 22:14:00

<h1 id="angularjs的重要概念">AngularJS的重要概念</h1>
<h2 id="mvc模式">MVC模式</h2>
<p>AngularJS最早按照MVC模式设计，在这种设计模式下，AngularJS组件可以分为：</p>
<ul>
<li><strong>M: Model，即模型</strong>，是应用程序中用于处理应用程序数据逻辑的部分，在AngularJS中:
<ul>
<li>即作用域对象(当前为$rootScope), 它可以包含一些属性或方法；</li>
<li>充当储存数据的容器；</li>
<li>提供操作数据的方法。</li>
</ul>
</li>
<li><strong>V: View，即视图</strong>，是应用程序中用于处理数据显示的部分，在AngularJS中:
<ul>
<li>即HTML页面，AngularJS提供了一些指令来增强HTML标签的作用；</li>
<li>包括: html/css/directive/expression；</li>
<li>可显示Model的数据；</li>
<li>将数据同步到Model；</li>
<li>可与用户交互。</li>
</ul>
</li>
<li><strong>C: Controller，即控制器</strong>，是应用程序中处理用户交互的部分，在AngularJS中:
<ul>
<li>即AngularJS的Controller；</li>
<li>可初始化Model数据；</li>
<li>为Model添加行为方法。</li>
</ul>
</li>
</ul>
<h2 id="mvvm模式">MVVM模式</h2>
<p>有另一种观点，将AngularJS视为MVVM模式。MVVM模式将“双向绑定”的思想作为核心，切断了View和Model之间的联系，View、Model完全通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据变化会同时引起数据源数据的变化，数据源数据的变化也会立即反映到视图上。MVVM模式和MVC模式最大的区别是：模型中的数据一旦变化，会自动影响视图，不需要控制器协调。</p>
<ul>
<li>M: Model, 即数据模型, 在AngularJS中:
<ul>
<li>为scope中的各个数据对象;</li>
</ul>
</li>
<li>V: View, 即视图, 在AngularJS中:
<ul>
<li>为HTML页面;</li>
</ul>
</li>
<li>VM: ViewModel, 即视图模型, 在AngularJS中:
<ul>
<li>为scope对象;</li>
</ul>
</li>
<li>在AngularJS中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层。</li>
</ul>
<h2 id="指令">指令</h2>
<p>所谓的指令就是AngularJS对HTML的更改、补丁，其中ng是AngularJS的简写，也是内置指令的标记。</p>
<h3 id="ng-app">ng-app</h3>
<ul>
<li>
<p>表示AngularJS操作的范围；</p>
</li>
<li>
<p>一个页面上仅能出现一个ng-app指令，若有多个ng-app指令，则后续的ng-app不工作；</p>
</li>
<li>
<p>ng-app若加在html标签上，则表示AngularJS控制了全页面，AngularJS会等待ng-app指令标签中的所有东西都加载后再执行，所以AngularJS的JavaScript文件在head或者body导入均可。</p>
</li>
</ul>
<pre><code><!DOCTYPE html>
<html ng-app>
<head>
<title>hello world</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body>
{{ 1 + 2 }}
</body>
</html>
</code></pre>
<h3 id="ng-init">ng-init</h3>
<p>用于声明变量，该指令的属性值可声明一个或者多个变量，多个变量直接用逗号隔开即可。</p>
<pre><code><div ng-init="num=5">
{{num * num}}
</div>
</code></pre>
<h3 id="ng-bind">ng-bind</h3>
<p>将表达式的值绑定到HTML元素上（如<span../>，<div../>等）。</p>
<pre><code><p ng-bind="2 * 5"></p>
</code></pre>
<h3 id="ng-style">ng-style</h3>
<p>表示给HTML元素加上样式，常见有如下三种写法。</p>
<p>写法一：</p>
<pre><code><div ng-style="{background:red;}"></div>
</code></pre>
<p>写法二：</p>
<pre><code>//...
myapp.controller("MainCtrl", [function(){
this.style = {background:red;};
}]);
//...
<body ng-controller="MainCtrl as mainctrl">
<div ng-style="mainctrl.style"></div>
</body>
</code></pre>
<p>写法三：</p>
<pre><code>//...
myapp.controller("MainCtrl", [function(){
this.getStyle = function{
   return {background:red;};
};
}]);
//...
<body ng-controller="MainCtrl as mainctrl">
<div ng-style="mainctrl.getStyle()"></div>
</body>
</code></pre>
<p>注意：如果控制器中的某一个值由其他值决定，并且希望其他值改变的时候，这个值也能改变，此时要写成函数return的形式。</p>
<h3 id="ng-repeat">ng-repeat</h3>
<p>表示重复一个HTML标签。</p>
<p>语法格式为：</p>
<pre><code><div ng-repeat="变量名 in 数组数据"></div>//变量将自动按顺序迭代数组数据中的每一项。
</code></pre>
<h3 id="ng-options">ng-options</h3>
<p>ng-options可以智能地从控制器中取值当做选项。注意，使用ng-options的下拉菜单必须有ng-model属性与控制器双向绑定。</p>
<p>在下面select代码块中实现了下拉菜单的功能，option标签实现了下拉项，页面显示的是诸如“满意”之类的文字，存入数据库的是诸如“10”之类的value值。</p>
<pre><code><select name="" id="">
<option value="10">非常满意</option>
<option value="8">比较满意</option>
<option value="6">满意</option>
<option value="4">比较不满意</option>
<option value="2">稍微不满意</option>
<option value="0">非常不满意</option>
</select>
</code></pre>
<p>ng-options常见的几种使用情形：</p>
<ul>
<li>
<p>普通数组，语法格式：label for value in array，value是提交的值，label是显示的值。</p>
<pre><code><body ng-controller="MainCtrl as mainctrl">
<select ng-model="mainctrl.label" ng-options="item for item in mainctrl.arr">
</select>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.label = "东风";
this.arr = ["东风", "幺鸡", "二饼", "二条"];
}])
</script>
</body>
</code></pre>
</li>
<li>
<p>对象作为数组元素，语法格式：value as label for item in array，value是提交的值，label是显示的值。</p>
<pre><code><body ng-controller="MainCtrl as mainctrl">
<select ng-model="mainctrl.value" ng-options="item.id as item.city for item in mainctrl.arr">
</select>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.value = "";
this.arr = [
{"id": "010", "city": "北京"},
{"id": "029", "city": "西安"},
{"id": "0311", "city": "石家庄"},
{"id": "0312", "city": "保定"}];
}])
</script>
</body>
</code></pre>
</li>
<li>
<p>普通对象，语法格式value as label for (label, value) in array，value是提交的值，label是显示的值。</p>
<pre><code><body ng-controller="MainCtrl as mainctrl">
<select ng-model="mainctrl.value" ng-options="value as key for (key, value) in mainctrl.arr">
</select>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.value = "";
this.arr = {
"广东":"粤",
"福建":"闽",
"江西":"赣",
"山东":"鲁",
"河北":"冀"
}
}])
</script>
</body>
</code></pre>
</li>
</ul>
<h2 id="表达式">表达式</h2>
<p>{{}}是AngularJS的表达式模板定位符，主要用于在HTML页面上产生输出，里面可以填写AngularJS的表达式，表达式只能是简单运算，包括加、减、乘、除、求模、三目运算等，但不能是函数、循环、判断、赋值等复杂语句。</p>
<h2 id="模块">模块</h2>
<p>AngularJS的模块加载分为两种情况。</p>
<ul>
<li>
<p>匿名模块</p>
<p>就是没有为ng-app指定属性值或属性值为空字符串），此时AngularJS可以自动加载并创建AngularJS模块。</p>
</li>
<li>
<p>命名模块</p>
<p>为 ng-app 指定了属性值，该属性值就是该模块的名称），此时必须调用angular对象的module（）方法来创建AngularJS模块。</p>
</li>
</ul>
<h2 id="控制器">控制器</h2>
<ul>
<li>
<p>AngularJS使用装饰者模式创建控制器，即首先创建一个对象，然后不断丰富对象的内容；</p>
</li>
<li>
<p>控制器是一个对象，是我们View与Model之间的桥梁；</p>
</li>
<li>
<p>当我们使用了ng-controller指令，内部就会创建控制器对象；</p>
</li>
<li>
<p>每定义一个ng-controller指令，内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中,在函数内部可以直接使用$scope对象；</p>
</li>
<li>
<p>jQuery向外暴露了"$"这个底层变量；underscore向外暴露了"_"这个底层变量；AngularJS向外暴露了"angular"这个底层变量。</p>
</li>
</ul>
<pre><code><!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Angular程序</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body>

<div ng-controller="MainCtrl as mainctrl">
<h1>{{mainctrl.a}}</h1>
<input type="button" value="点击" ng-click="mainctrl.add()">
</div>
<script type="text/javascript">
   //创建一个名为app的模块，第一个参数是ng-app的名称，第二个参数是一个数组，数组里存储该模块所需的依赖。
var app = angular.module('myapp', []);
//创建一个名为MainCtrl的控制器类，第一个参数是控制器的名称，第二个参数是一个数组，描述依赖项和顺序注入到函数里面用的，数组最后一个元素是控制器的函数主程序。
app.controller('MainCtrl', [function(){
//定义一个变量a并赋值100。
this.a = 100;
//做个备份。
var self = this;
         //定义一个方法。
this.add = function(){
//每运行一次自增1。
            self.a++;
}
}]);
</script>
</body>
</html>
</code></pre>
<h2 id="数据绑定">数据绑定</h2>
<p>AngularJS只关心数据，数据的变化会自动引起视图的变化，并且视图是局部刷新，不是整个页面刷新，AngularJS会自动识别哪里用到了这个更新的数据，这个过程叫做脏检查。</p>
<h3 id="数据绑定-1">数据绑定</h3>
<p>数据从一个地方A转移(传递)到另一个地方B的过程称为数据绑定, 这个过程由框架来完成。</p>
<ul>
<li>View-->Model；</li>
<li>Model-->View。</li>
</ul>
<h3 id="双向数据绑定">双向数据绑定</h3>
<p>数据可以从View(视图层)流向Model（模型）, 也可以从Model流向View。</p>
<ul>
<li>Model<-->View：
<ul>
<li>当改变View中的数据, Model对象的对应属性也会随之改变:ng-model指令数据从View==>Model；</li>
<li>当Model域对象的属性发生改变时, 页面对应数据随之更新:{{}}表达式数据从Model==>View。</li>
</ul>
</li>
<li>ng-model是双向数据绑定, 而{{}}是单向数据绑定。</li>
</ul>
<pre><code><!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>双向绑定</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as mainctrl">
{{mainctrl.a}}
<br/><input type="text" ng-model="mainctrl.a">
</div>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.a = 100;
}])
</script>
</body>
</html>
</code></pre>
<h3 id="单向数据绑定">单向数据绑定</h3>
<p>数据只能单方向流动。</p>
<ul>
<li>View-->Model： ng-init；</li>
<li>Model-->View: {{name}}；</li>
<li>ng-init用来初始化当前的作用域变量。</li>
</ul>
<h2 id="依赖注入">依赖注入</h2>
<p>依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。</p>
<p>依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。</p>
<pre><code><script type="text/javascript">
function(event) {
   alert(event.clientX);
}
</script>
</code></pre>
<p>上图所示代码块中，event对象就是以依赖注入的方式进来使用的依赖对象。</p>
<p>AngularJS的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用，这其中形参必须是特定的名称（‘$scope’）, 否则AngularJS无法注入，将抛出异常。</p>
<pre><code><script type="text/javascript">
function MyController($scope) {
}
</script>
</code></pre>
<p>AngularJS中如果要发出Ajax请求，此时需要使用内置$http服务，所有的内置服务都是$开头的，使用依赖注入的语法引入到控制器中。</p>
<pre><code><script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', ["$http", function($http){}]);
</script>
</code></pre>
<h2 id="声明式编程和命令式编程">声明式编程和命令式编程</h2>
<h3 id="命令式编程">命令式编程</h3>
<p>命令“机器”如何去作事情(how)，这样无论你想要的是什么(what)，它都会按照你的命令实现，更注重执行的过程，可类比为解答题。</p>
<pre><code>var arr = ;
var newArr = [];
for(var i=0;i<arr.length;i++){
var num = arr*2;
newArr.push(num);
}
console.log(newArr);
</code></pre>
<h3 id="声明式编程">声明式编程</h3>
<p>告诉“机器”你想要的是什么(what)，让机器想出如何去作(how) ，更注重执行的结果，可类比为填空题。</p>
<pre><code>var newArr2 = arr.map(function (item) {
return item*2;
});
console.log(newArr2);
</code></pre>
<h2 id="案例集锦">案例集锦</h2>
<h3 id="调色板">调色板</h3>
<p>通过滑块和文本框改变色块颜色。</p>
<pre><code><!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>调色板</title>
<meta charset="utf-8"/>
<style type="text/css">
   .box{
         width:200px;
         height:200px;
         border:1px solid #333;
   }
</style>
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
<div class="box" ng-style="mainctrl.getColor()"></div>
<p>
   r:
   <input type="range" min="0" max="255" ng-model="mainctrl.r">
   <input type="number" min="0" max="255" ng-model="mainctrl.r">
</p>
<p>
   g:
   <input type="range" min="0" max="255" ng-model="mainctrl.g">
   <input type="number" min="0" max="255" ng-model="mainctrl.g">
</p>
<p>
   b:
   <input type="range" min="0" max="255" ng-model="mainctrl.b">
   <input type="number" min="0" max="255" ng-model="mainctrl.b">
</p>
<p>
   a:
   <input type="range" min="0" max="1" step="0.01" ng-model="mainctrl.a">
   <input type="number" min="0" max="1" step="0.01" ng-model="mainctrl.a">
</p>
<script type="text/javascript">
   var app = angular.module("myapp", []);
   app.controller('MainCtrl', [function(){
         this.r = 100;
         this.g = 100;
         this.b = 100;
         this.a = 0.38;
         this.getColor = function(){
            return {"background-color":"rgb(" + this.r + "," + this.g + "," + this.b + "," + this.a + ")"};
         }
   }]);
</script>
</body>
</html>
</code></pre>
<h3 id="模拟微博发布框">模拟微博发布框</h3>
<p>限制发送字数最多为140字，并且能够实时提醒用户写了多少个字，当超过140字时，数字变红，同时发布按钮无法点击。</p>
<pre><code><!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>模拟微博发布框</title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
<p>
<textarea cols="30" rows="10" placeholder="请输入内容" ng-model="mainctrl.txt"></textarea>
<span ng-style="mainctrl.getColor()">{{mainctrl.txt.length}}/140字</span>
</p>
<p>
<input type="button" value="发布" ng-disabled="mainctrl.txt.length > 140"/>
<input type="button" value="清空" ng-click="mainctrl.reset()" ng-disabled="mainctrl.txt.length == 0"/>
</p>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.txt = "";
var self = this;
this.getColor = function(){
            return self.txt.length >= 140 ? {"color": "red"} : {"color": "#333"};
};
this.reset = function(){
self.txt = "";
}
}]);
</script>
</body>
</html>
</code></pre>
<h3 id="模拟表格">模拟表格</h3>
<pre><code><!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>模拟表格</title>
<meta charset="utf-8" />
<style type="text/css">
   .table_wrap{
      width: 600px;
      margin: 0 auto;
   }
table, tr, td, th{
border-bottom: 1px solid #333;
border-collapse: collapse;
}
th{
cursor: pointer;
}
th, td{
width: 20%;
line-height: 150%;
}
tr:nth-child(2n){
background-color: #eee;
}
.form_box{
background-color: skyblue;
padding: 10px;
width: 400px;
margin-top: 10px;
}
</style>
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
<div class="table_wrap">
<table>
      <tr>
      <th ng-click="mainctrl.changeSort('sid')">
      学号
      <span ng-show="mainctrl.sortBy == 'sid'">{{mainctrl.getSortSign()}}
      </span>
      </th>
      <th ng-click="mainctrl.changeSort('name')">
      姓名
      <span ng-show="mainctrl.sortBy == 'name'">{{mainctrl.getSortSign()}}
      </span>
      </th>
      <th ng-click="mainctrl.changeSort('Chinese')">
      语文成绩
      <span ng-show="mainctrl.sortBy == 'Chinese'">{{mainctrl.getSortSign()}}
      </span>
      </th>
      <th ng-click="mainctrl.changeSort('Math')">
      数学成绩
      <span ng-show="mainctrl.sortBy == 'Math'">{{mainctrl.getSortSign()}}
      </span>
      </th>
      <th ng-click="mainctrl.changeSort('English')">
      英语成绩
      <span ng-show="mainctrl.sortBy == 'English'">{{mainctrl.getSortSign()}}
      </span>
      </th>
      <th>删除</th>
      </tr>
      <tr ng-repeat="item in mainctrl.data">
      <td>{{item.sid}}</td>
      <td>{{item.name}}</td>
      <td>{{item.Chinese}}</td>
      <td>{{item.Math}}</td>
      <td>{{item.English}}</td>
      <td><input type="button" value="删除" ng-click="mainctrl.delete(item.sid)"></td>
      </tr>
   </table>
</div>
<div class="form_box">
<p>
学号：<input type="text" ng-model="mainctrl.form_obj.sid">
</p>
<p>
姓名：<input type="text" ng-model="mainctrl.form_obj.name">
</p>
<p>
语文：<input type="text" ng-model="mainctrl.form_obj.Chinese">
</p>
<p>
数学：<input type="text" ng-model="mainctrl.form_obj.Math">
</p>
<p>
英语：<input type="text" ng-model="mainctrl.form_obj.English">
</p>
<p>
<input type="button" value="插入" ng-click="mainctrl.add()">
</p>
</div>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.data = [
   {"sid":1002, "name":"小黎", "Chinese":102, "Math":134, "English":109},
   {"sid":1003, "name":"小东", "Chinese":112, "Math":114, "English":112},
   {"sid":1004, "name":"小董", "Chinese":132, "Math":105, "English":111},
   {"sid":1005, "name":"小烈", "Chinese":92, "Math":134, "English":144},
]
//表单对象，供双向数据绑定用的。AngularJS不能碰DOM，它改变的是数据，数据变化了，DOM自动变化。
this.form_obj = {};
//数据备份。
var self = this;
//增加
this.add = function(){
self.data.push(self.form_obj);
self.form_obj = {};
};
         //删除
this.delete = function(sid){
            for(var i = 0; i < self.data.length; i++){
            if(self.data.sid == sid){
            self.data.splice(i, 1);
            }
            }
};
//按谁排序
this.sortBy = "sid";
//升序还是降序,true表示升序
this.asc = true;

this.getSortSign = function(){
            return self.asc ? "▼" : "▲";
};
         //排序
         this.changeSort = function(key_name){
            if(key_name == self.sortBy){
            self.asc = !self.asc;
            }else{
               self.sortBy = key_name;
               self.asc = true;
            }
            self.data.sort(function(a, b){
            if(a > b){
            return self.asc ? 1 : -1;
            }else{
            return self.asc ? -1 : 1;
            }
            })
         };
}]);
</script>
</body>
</html>
</code></pre>
<h3 id="表单验证">表单验证</h3>
<h4 id="两个条件">两个条件</h4>
<ul>
<li>需要验证的控件必须有ng-model属性；</li>
<li>form必须有name属性。</li>
</ul>
<p>要想验证表单，必须符合上面两个条件；只要符合上面两个条件，表单就开始验证了。</p>
<pre><code><body ng-controller="MainCtrl as mainctrl">
<form name="myform">
<p>
姓名：<input type="text" required ng-model="mainctrl.formobj.name">
</p>
</form>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.formobj = {};
}])
</script>
</body>
</code></pre>
<pre><code><!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>表单验证</title>
<meta charset="utf-8" />
<style type="text/css">
   body {
   font-size: 16px;
   font-family: "微软雅黑";
   }
   span {
   font-size: 12px;
   }
   .passwordstrengthbar {
   width: 100px;
   height: 20px;
   }
   .s1 {
   background-color: red;
   }
   .s2 {
   background-color: orange;
   }
   .s3 {
   background-color: yellow;
   }
   .s4 {
   background-color: lightseagreen;
   }
   .s5 {
   background-color: green;
   }
</style>
<script
   type="text/javascript"
   src="js/lib/angularjs/angular.min.js"
></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
{{mainctrl.formobj}}
<form name="myform">
   <p>
   *姓名：<input
      type="text"
      required
      name="name"
      ng-model="mainctrl.formobj.name"
      ng-pattern="/^([\u4e00-\u9fa5]{2,20}|{2,20})$/"
   />
   <span ng-show="myform.name.$dirty && myform.name.$error.required"
      >请填写用户名</span
   >
   <span ng-show="myform.name.$error.pattern">不合法的姓名</span>
   </p>
   <p>
   *年龄：
   <input
      type="number"
      name="age"
      required
      ng-model="mainctrl.formobj.age"
      min="7"
      max="18"
   />
   <span ng-show="myform.age.$dirty && myform.age.$error.required"
      >请填写年龄</span
   >
   <span ng-show="myform.age.$error.max">最大为18岁</span>
   <span ng-show="myform.age.$error.min">最小为7岁</span>
   </p>
   <p>
   *密码：
   <input
      type="password"
      name="password"
      required
      ng-model="mainctrl.formobj.password"
      ng-minlength="6"
   />
   <span
      ng-show="myform.password.$dirty && myform.password.$error.required"
      >请填写密码</span
   >
   <span ng-show="myform.password.$error.minlength">最短长度6位</span>
   <span ng-show="mainctrl.passwordScore < 3">密码强度不够</span>
   </p>
   <p
   class="passwordstrengthbar"
   class="s5"
   ng-class="mainctrl.getStrengthClass()"
   ng-show="myform.password.$valid"
   >
   {{mainctrl.passwordtip}}
   </p>
   <p>
   网址：
   <input type="url" name="url" ng-model="mainctrl.formobj.url" />
   <span ng-show="myform.url.$error.url">网址格式不正确</span>
   </p>
   <p>
   <input
      type="button"
      value="提交"
      ng-disabled="myform.$invalid || mainctrl.passwordScore < 3"
   />
   </p>
</form>
<script type="text/javascript">
   var app = angular.module("myapp", []);
   function checkStrength(password) {
   var lv = 0;
   if (!password) {
      return;
   }
   if (password.match(//g)) {
      lv++;
   }
   if (password.match(//g)) {
      lv++;
   }
   if (password.match(/()/g)) {
      lv++;
   }
   if (password.match(/([\!\@\#\$\%\^\&\*\?\/\|\\])/g)) {
      lv += 2;
   }
   if (password.length < 6) {
      lv = 0;
   }
   if (lv > 5) {
      lv = 5;
   }
   return lv;
   }
   app.controller("MainCtrl", [
   function () {
      this.formobj = {};
      this.passwordtip = "";
      this.getStrengthClass = function () {
         this.passwordScore = checkStrength(this.formobj.password);
         console.log(this.passwordScore);
         if (this.passwordScore == 1) {
         this.passwordtip = "不安全";
         } else if (this.passwordScore == 2) {
         this.passwordtip = "较不安全";
         } else if (this.passwordScore == 3) {
         this.passwordtip = "安全";
         } else if (this.passwordScore == 4) {
         this.passwordtip = "较安全";
         } else if (this.passwordScore == 5) {
         this.passwordtip = "特别安全";
         }
         return "s" + this.passwordScore;
      };
   },
   ]);
</script>
</body>
</html>
</code></pre><br><br>
来源：https://www.cnblogs.com/best-doraemon/p/17069441.html

頁: [1]

琼殿技术论坛's Archiver

Angularjs的重要概念