<!DOCTYPE html><html><header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <!--引入自己的樣式文件CSS--> <link href="angular_demo2.css" rel="stylesheet"> <!--引入angularJs--> <script src="angular.min.js"></script> <!--引入自己的js文件--> <script src="angualr_demo2.js"></script> <title>angularJsDemo2</title></header><!--ng-model 雙向數據綁定ng-bing 數據綁定ng-if 控制所在節點的顯示和隱藏取值為布爾值效果與ng-show相同ng-show 效果與ng-if相同，區別在于 ng-show是通過改變display屬性進行隱藏和顯示，ng-if是通過移除和生成dom。ng-click 注冊點擊事件{{}} 表達式 ，里面存放數據名稱機會展示對應的值，也可以放一些表達式，會展示表達式的結果。ng-repeat 遍歷數組，為每一個數組項生成一個他所在的標簽。使用方法 ng-repeat=“【別名（隨便起）】 in 【數組名】”--><body ng-app="myApp"> <div ng-controller="firstController"> <!-- ng-model 一般用在輸入標簽中如input radio checkbox等，可以隨時拿到對應的值--> <div>雙向數據綁定，我隨時輸入數據，下面即可實時展示。</div> <div>輸入數據：<input ng-model="yourInput"></div> <div>你輸入的數據：{{yourInput}}</div><br><hr><br> <div> <input class="rad" type="radio" value="男" name="sex" ng-click="radioSele(value)">男 <input class="rad" type="radio" value="女" name="sex" ng-click="radioSele(value)">女 </div> <br><hr><br> <div ng-repeat="item in colors" ng-click="selectColor()"> <label ng-bind="item.name"></label>:<input type="checkbox" class="check"> </div> <br><hr><br> <!-- ng-bing 和表達式效果類似，但是像只展示數據一般都用ng-bing指令，因為要展示的數據為加載出來之前 使用表達式就會在頁面上出現兩個大括號，ng-bing則不會出現，他會在數據加載完成之后進行顯示，而且數據變動也會隨之更新--> <div>ng-bing(性別)：<label ng-bind="config.sex"></label></div> <br><hr><br> <div>你選的顏色：<label ng-repeat="col in selecteds">{{col.name}}、</label></div> <br><hr><br> <div>點擊圖片進行隱藏和顯示</div> <img src="df.jpg" style="width: 150px;height: 150px" ng-show="isShow" ng-click="showImg()"> <img src="index.jpg" style="width: 150px;height: 150px" ng-show="!isShow" ng-click="showImg()"> </div></body></html>邏輯控制/*** Created by wangjiakun on 2016/9/19 0019.*/var myApp = angular.module("myApp",[]);myApp.controller("firstController",["$scope","$rootScope",function ($scope,$rootScope) {$scope.yourInput = "";//承載輸入的值，頁面中的ng-model與之名字一致。所謂雙向綁定就是將這個變量綁定到了input框中$scope.config = {sex:"",};$scope.isShow = false;//是否展示圖片，這里有兩張圖片，互斥顯示。$scope.colors = [{name:"白色"},{name:"紅色"},{name:"黑色"},{name:"藍色"},{name:"綠色"},{name:"黃色"},];$scope.checkboxs = [];//所有的多選框數據$scope.selecteds = [];//被選擇的多選框數據/*獲取多選框的備選的數據*/$scope.selectColor = function () {$scope.selecteds = [];$scope.checkboxs = document.getElementsByClassName("check");for(var i=0;i<$scope.checkboxs.length;i++){if($scope.checkboxs[i].checked){$scope.selecteds.push($scope.colors[i]);}}};/*獲取單選值*/$scope.radioSele = function () {var radio = document.getElementsByClassName("rad");for(var i = 0;i<radio.length;i++){if(radio[i].checked){$scope.config.sex = radio[i].value;}}};/*控制互斥顯示圖片*/$scope.showImg = function () {$scope.isShow = !$scope.isShow;};}]);
新聞熱點
疑難解答
