AngularJS的重要概念

MVC模式

AngularJS最早按照MVC模式設計，在這種設計模式下，AngularJS組件可以分為：

M: Model，即模型，是應用程式中用于處理應用程式資料邏輯的部分，在AngularJS中:
- 即作用域物件(當前為$rootScope), 它可以包含一些屬性或方法；
- 充當儲存資料的容器；
- 提供操作資料的方法，
V: View，即視圖，是應用程式中用于處理資料顯示的部分，在AngularJS中:
- 即HTML頁面，AngularJS提供了一些指令來增強HTML標簽的作用；
- 包括: html/css/directive/expression；
- 可顯示Model的資料；
- 將資料同步到Model；
- 可與用戶互動，
C: Controller，即控制器，是應用程式中處理用戶互動的部分，在AngularJS中:
- 即AngularJS的Controller；
- 可初始化Model資料；
- 為Model添加行為方法，

MVVM模式

有另一種觀點，將AngularJS視為MVVM模式，MVVM模式將“雙向系結”的思想作為核心，切斷了View和Model之間的聯系，View、Model完全通過ViewModel進行互動，而且Model和ViewModel之間的互動是雙向的，因此視圖的資料變化會同時引起資料源資料的變化，資料源資料的變化也會立即反映到視圖上，MVVM模式和MVC模式最大的區別是：模型中的資料一旦變化，會自動影響視圖，不需要控制器協調，

M: Model, 即資料模型, 在AngularJS中:
- 為scope中的各個資料物件;
V: View, 即視圖, 在AngularJS中:
- 為HTML頁面;
VM: ViewModel, 即視圖模型, 在AngularJS中:
- 為scope物件;
在AngularJS中controller不再是架構的核心，在MVVM中只是起輔助作用，用來輔助$scope物件，即VM層，

指令

所謂的指令就是AngularJS對HTML的更改、補丁，其中ng是AngularJS的簡寫，也是內置指令的標記，

ng-app

表示AngularJS操作的范圍；
一個頁面上僅能出現一個ng-app指令，若有多個ng-app指令，則后續的ng-app不作業；
ng-app若加在html標簽上，則表示AngularJS控制了全頁面，AngularJS會等待ng-app指令標簽中的所有東西都加載后再執行，所以AngularJS的JavaScript檔案在head或者body匯入均可，

<!DOCTYPE html>
<html ng-app>
<head>
	<title>hello world</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="https://www.cnblogs.com/engpj/archive/2023/01/27/js/lib/angularjs/angular.min.js"></script>
</head>
<body>
    {{ 1 + 2 }}
</body>
</html>

ng-init

用于宣告變數，該指令的屬性值可宣告一個或者多個變數，多個變數直接用逗號隔開即可，

<div ng-init="num=5">
    {{num * num}}
</div>

ng-bind

將運算式的值系結到HTML元素上（如<span../>，<div../>等），

<p ng-bind="2 * 5"></p>

ng-style

表示給HTML元素加上樣式，常見有如下三種寫法，

寫法一：

<div ng-style="{background:red;}"></div>

寫法二：

//...
myapp.controller("MainCtrl", [function(){
    this.style = {background:red;};
}]);
//...
<body ng-controller="MainCtrl as mainctrl">
    <div ng-style="mainctrl.style"></div>
</body>

寫法三：

//...
myapp.controller("MainCtrl", [function(){
    this.getStyle = function{
        return {background:red;};
    };
}]);
//...
<body ng-controller="MainCtrl as mainctrl">
    <div ng-style="mainctrl.getStyle()"></div>
</body>

注意：如果控制器中的某一個值由其他值決定，并且希望其他值改變的時候，這個值也能改變，此時要寫成函式return的形式，

ng-repeat

表示重復一個HTML標簽，

語法格式為：

<div ng-repeat="變數名 in 陣列資料"></div>  //變數將自動按順序迭代陣列資料中的每一項，

ng-options

ng-options可以智能地從控制器中取值當做選項，注意，使用ng-options的下拉選單必須有ng-model屬性與控制器雙向系結，

在下面select代碼塊中實作了下拉選單的功能，option標簽實作了下拉項，頁面顯示的是諸如“滿意”之類的文字，存入資料庫的是諸如“10”之類的value值，

<select name="" id="">
    <option value="https://www.cnblogs.com/engpj/archive/2023/01/27/10">非常滿意</option>
    <option value="https://www.cnblogs.com/engpj/archive/2023/01/27/8">比較滿意</option>
    <option value="https://www.cnblogs.com/engpj/archive/2023/01/27/6">滿意</option>
    <option value="https://www.cnblogs.com/engpj/archive/2023/01/27/4">比較不滿意</option>
    <option value="https://www.cnblogs.com/engpj/archive/2023/01/27/2">稍微不滿意</option>
    <option value="https://www.cnblogs.com/engpj/archive/2023/01/27/0">非常不滿意</option>
</select>

ng-options常見的幾種使用情形：

普通陣列，語法格式：label for value in array，value是提交的值，label是顯示的值，

<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>

物件作為陣列元素，語法格式：value as label for item in array，value是提交的值，label是顯示的值，

<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.valuehttps://www.cnblogs.com/engpj/archive/2023/01/27/= "";
    		this.arr = [
    		{"id": "010", "city": "北京"},
    		{"id": "029", "city": "西安"},
    		{"id": "0311", "city": "石家莊"},
    		{"id": "0312", "city": "保定"}];
    	}])
    </script>
</body>

普通物件，語法格式value as label for (label, value) in array，value是提交的值，label是顯示的值，

<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.valuehttps://www.cnblogs.com/engpj/archive/2023/01/27/= "";
    		this.arr = {
    		"廣東":"粵",
    		"福建":"閩",
    		"江西":"贛",
    		"山東":"魯",
    		"河北":"冀"
    	}
    }])
    </script>
</body>

運算式

{{}}是AngularJS的運算式模板定位符，主要用于在HTML頁面上產生輸出，里面可以填寫AngularJS的運算式，運算式只能是簡單運算，包括加、減、乘、除、求模、三目運算等，但不能是函式、回圈、判斷、賦值等復雜陳述句，

模塊

AngularJS的模塊加載分為兩種情況，

匿名模塊

就是沒有為ng-app指定屬性值或屬性值為空字串），此時AngularJS可以自動加載并創建AngularJS模塊，
命名模塊

為 ng-app 指定了屬性值，該屬性值就是該模塊的名稱），此時必須呼叫angular物件的module（）方法來創建AngularJS模塊，

控制器

AngularJS使用裝飾者模式創建控制器，即首先創建一個物件，然后不斷豐富物件的內容；
控制器是一個物件，是我們View與Model之間的橋梁；
當我們使用了ng-controller指令，內部就會創建控制器物件；
每定義一個ng-controller指令，內部就會創建一個新的作用域物件（$scope）, 并自動注入建構式中,在函式內部可以直接使用$scope物件；
jQuery向外暴露了"$"這個底層變數；underscore向外暴露了"_"這個底層變數；AngularJS向外暴露了"angular"這個底層變數，

<!DOCTYPE html>
<html ng-app="myapp">
<head>
	<title>Angular程式</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="https://www.cnblogs.com/engpj/archive/2023/01/27/js/lib/angularjs/angular.min.js"></script>
</head>
<body>
    <!-- 實體化控制器MainCtrl類，并起一個別名mainctrl，控制器接管的范圍為此div區域， -->
    <div ng-controller="MainCtrl as mainctrl">
    	<h1>{{mainctrl.a}}</h1>
    	<input type="button" value="https://www.cnblogs.com/engpj/archive/2023/01/27/點擊" 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>

資料系結

AngularJS只關心資料，資料的變化會自動引起視圖的變化，并且視圖是區域重繪，不是整個頁面重繪，AngularJS會自動識別哪里用到了這個更新的資料，這個程序叫做臟檢查，

資料系結

資料從一個地方A轉移(傳遞)到另一個地方B的程序稱為資料系結, 這個程序由框架來完成，

View-->Model；
Model-->View，

雙向資料系結

資料可以從View(視圖層)流向Model（模型）, 也可以從Model流向View，

Model<-->View：
- 當改變View中的資料, Model物件的對應屬性也會隨之改變: ng-model指令資料從View==>Model；
- 當Model域物件的屬性發生改變時, 頁面對應資料隨之更新: {{}}運算式資料從Model==>View，
ng-model是雙向資料系結, 而{{}}是單向資料系結，

<!DOCTYPE html>
<html ng-app="myapp">
<head>
	<title>雙向系結</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="https://www.cnblogs.com/engpj/archive/2023/01/27/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>

單向資料系結

資料只能單方向流動，

View-->Model ： ng-init；
Model-->View : {{name}}；
ng-init用來初始化當前的作用域變數，

依賴注入

依賴物件：完成某個特定的功能需要某個物件才能實作，這個物件就是依賴物件，

依賴注入：依賴的物件以形參的形式被注入進來使用，這種方式就是依賴注入，

<script type="text/javascript">
    function(event) {
        alert(event.clientX);
    }
</script>

上圖所示代碼塊中，event物件就是以依賴注入的方式進來使用的依賴物件，

AngularJS的 ‘$scope’物件就是依賴物件，并且是依賴注入的形式進行使用，這其中形參必須是特定的名稱（‘$scope’）, 否則AngularJS無法注入，將拋出例外，

<script type="text/javascript">
  function MyController($scope) {
  }
</script>

AngularJS中如果要發出Ajax請求，此時需要使用內置$http服務，所有的內置服務都是$開頭的，使用依賴注入的語法引入到控制器中，

<script type="text/javascript">
    var app = angular.module('myapp', []);
    app.controller('MainCtrl', ["$http", function($http){}]);
</script>

宣告式編程和命令式編程

命令式編程

命令“機器”如何去作事情(how)，這樣無論你想要的是什么(what)，它都會按照你的命令實作，更注重執行的程序，可類比為解答題，

var arr = [1,2,3,4,5];
var newArr = [];
for(var i=0;i<arr.length;i++){
  var num = arr[i]*2;
  newArr.push(num);
}
console.log(newArr);

宣告式編程

告訴“機器”你想要的是什么(what)，讓機器想出如何去作(how) ，更注重執行的結果，可類比為填空題，

var newArr2 = arr.map(function (item) {
  return item*2;
});
console.log(newArr2);

案例集錦

調色板

通過滑塊和文本框改變色塊顏色，

<!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="https://www.cnblogs.com/engpj/archive/2023/01/27/js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
    <div  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>

模擬微博發布框

限制發送字數最多為140字，并且能夠實時提醒用戶寫了多少個字，當超過140字時，數字變紅，同時發布按鈕無法點擊，

<!DOCTYPE html>
<html ng-app="myapp">
<head>
	<title>模擬微博發布框</title>
	<meta charset="utf-8" />
	<script type="text/javascript" src="https://www.cnblogs.com/engpj/archive/2023/01/27/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="https://www.cnblogs.com/engpj/archive/2023/01/27/發布" ng-disabled="mainctrl.txt.length > 140"/>
    	<input type="button" value="https://www.cnblogs.com/engpj/archive/2023/01/27/清空" 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>

模擬表格

<!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="https://www.cnblogs.com/engpj/archive/2023/01/27/js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
    <div >
    	<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="https://www.cnblogs.com/engpj/archive/2023/01/27/洗掉" ng-click="mainctrl.delete(item.sid)"></td>
	    	</tr>
        </table>
    </div>
    <div >  
    	<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="https://www.cnblogs.com/engpj/archive/2023/01/27/插入" ng-click="mainctrl.add()">
    	</p>
    </div>
    <script type="text/javascript">
    	var app = angular.module('myapp', []);
    	app.controller('MainCtrl', [function(){
    		this.data = https://www.cnblogs.com/engpj/archive/2023/01/27/[
    		    {"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[i].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[self.sortBy] > b[self.sortBy]){
            			return self.asc ? 1 : -1;
            		}else{
            			return self.asc ? -1 : 1;
            		}
            	})
            };
    	}]);
    </script>
</body>
</html>

表單驗證

兩個條件

需要驗證的控制元件必須有ng-model屬性；
form必須有name屬性，

要想驗證表單，必須符合上面兩個條件；只要符合上面兩個條件，表單就開始驗證了，

<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>

<!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="https://www.cnblogs.com/engpj/archive/2023/01/27/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}|[a-zA-Z.\s]{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
        
        
        ng-
        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="https://www.cnblogs.com/engpj/archive/2023/01/27/提交"
          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(/[a-z]/g)) {
          lv++;
        }
        if (password.match(/[0-9]/g)) {
          lv++;
        }
        if (password.match(/([A-Z])/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542455.html

標籤：其他

上一篇：【Photoshop】切圖保存小坑（選擇png格式得到gif問題）

下一篇：轉義字符在前端開發中的詳細介紹

Angularjs的重要概念

AngularJS的重要概念

MVC模式

MVVM模式

指令

ng-app

ng-init

ng-bind

ng-style

ng-repeat

ng-options

運算式

模塊

控制器

資料系結

資料系結

雙向資料系結

單向資料系結

依賴注入

宣告式編程和命令式編程

命令式編程

宣告式編程

案例集錦

調色板

模擬微博發布框

模擬表格

表單驗證

兩個條件