angularJs基础（2）

最新推荐文章于 2019-09-05 09:50:42 发布

wjk_along

最新推荐文章于 2019-09-05 09:50:42 发布

阅读量242

点赞数

分类专栏： angularjs 文章标签： angularjs angularJs基础作用域

本文链接：https://blog.csdn.net/wjk_along/article/details/54863521

版权

angularjs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.常用ng开头指令

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 【数组名】”

页面布局

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

};

}]);

<span style="color:#ff0000">附件中有完整例子。</span>

wjk_along

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJs基础（2）

1.常用ng开头指令 ng-model 双向数据绑定 ng-bing 数据绑定 ng-if 控制所在节点的显示和隐藏取值为布尔值效果与ng-show相同 ng-show 效果与ng-if相同，区别在于 ng-show是通过改变display属性进行隐藏...
复制链接

扫一扫

专栏目录