angularJs基础（2）

来源：互联网发布：网络电影大卖的排名编辑：程序博客网时间：2024/06/05 21:14

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;
    };
}]);

附件中有完整例子。

0 0