<!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;};}]);
新闻热点
疑难解答
