初识angularjs

今天是大年初五，小颖在家实在坐不住了，所以昨天从家里坐车到了自己租的房子了，回家亲戚见面就问我和我奶：“红红（我爸小名）家女子现在上学还是上班着呢？在哪上班呢？多大了？有对象了吗？”前面的问题倒是还好，问对象就~~~~~~~~~~~~~~~~~~~~，我想说我还是个宝宝，我不想太早结婚，😫😫😫😫😫😫😫😫😫😫😫😫😫😫😫😫

回来后因为后期工作的需要要用angularjs，所以小颖想着先熟悉下，所以也就早早的过来了，昨天把回家之前脱下的脏衣服洗了，弄完身心疲惫啊，好啦不扯啦，来看看小颖都学了啥：

1.js实现数据同步更新

2.angularjs部分指令：

ng-app
ng-model
ng-bind
ng-init
ng-repeat
ng-style
ng-bind-html

js实现数据同步更新 angularjs实现数据同步更新

js实现数据同步更新代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>使用js实现数据同步更新</title>
    <style type="text/css">
    .main {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #txt {
        width: 100%;
    }

    #updata_for_txt {
        background-color: #cac6c6;
        width: 100%;
        height: 150px;
    }
    </style>
</head>

<body>
    <div class='main'>
        <input type="text" id='txt'>
        <div id='updata_for_txt'></div>
    </div>
</body>
<script type="text/javascript">
window.onload = function() {
    let _txt = document.getElementById('txt');
    let _div = document.getElementById('updata_for_txt');
    
    _txt.oninput = function() {
        _div.innerHTML = _txt.value;
    };
};
</script>

</html>

angularjs实现数据同步更新

<!DOCTYPE html>
<html ng-app="">

<head>
    <meta charset="utf-8">
    <title>使用angularjs实现数据同步跟新</title>
    <script src="js/angular.js" charset="utf-8"></script>
    <style type="text/css">
    .main {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #txt {
        width: 100%;
    }

    #updata_for_txt {
        background-color: #cac6c6;
        width: 100%;
        height: 150px;
    }
    </style>
</head>

<body>
    <div class='main'>
        <input type="text" id='txt' ng-model="a">
        <div id='updata_for_txt' ng-bind="a"></div>
    </div>
</body>

</html>

指令：

ng-app      范围
ng-model    双向绑定
ng-bind     输出
单向      数据->视图
ng-init     初始值
ng-repeat     遍历t数组 / json

ng-app实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="angular.js" charset="utf-8"></script>
  </head>
  <body>
    <div ng-app="">
      <input type="text" name="" value="" ng-model="a">
      <div class="" ng-bind="a"></div>
    </div>

    <div>
      <input type="text" name="" value="" ng-model="b">
      <div class="" ng-bind="b"></div>
    </div>

  </body>
</html>

ng-model实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/angular.js" charset="utf-8"></script>
  </head>
  <body>
    <div ng-app="">
      <span ng-bind="a"></span>
      <input type="text" name="" value="" ng-model="a">
      <select ng-model="a">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">武汉</option>
      </select>
    </div>

  </body>
</html>

ng-bind或{{表达式}} 实例：

<!DOCTYPE html>
<html ng-app="">
<head>
    <title>{{a}}</title>
    <script src="js/angular.js" charset="utf-8"></script>
</head>
<body>
<input type="text" ng-model="a">
<p>{{a}}</p>
<input type="text" ng-model="b">
<div style="width:200px;height:200px;background:{{b}};"></div>
<input type="text" ng-model="c"><br>
<img src="{{c}}" alt="" style="width:100px;height:100px;">
</body>
</html>

页面效果：

<span ng-bind="item.status=='2'?'启用':'禁用'" ng-click="changeStatus(item)" class="btn" ng-class="{'warning fa fa-ban':item.status=='1','fa fa-play':item.status=='2'}"></span>

当 item.status=='2' 时，页面显示启用，否则显示禁用

当 item.status=='1'时，增加class类名 warning fa fa-ban item.status=='2'时增加class类名 fa fa-play

ng-init 实例：

<!DOCTYPE html>
<html ng-app="">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/angular.js" charset="utf-8"></script>
  </head>
  <body ng-init="a=0;b=0;">
    <input type="number" ng-model="a">
    <input type="number" ng-model="b">
    <span>{{a*b}}</span>
  </body>
</html>

ng-repeat实例：

<!DOCTYPE html>
<html ng-app="">

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/angular.js" charset="utf-8"></script>
</head>

<body>
    <div ng-init="arr=[12,5,8,9,10,12]">
        <ul>
            <li ng-repeat="item in arr track by $index">{{item}}</li>
        </ul>
    </div>
    <div ng-init="arr2=[{user: 'blue', age: 18}, {user: '张三', age: 23}, {user: '李四', age: 25}, {user: 'blue', age: 18}]">
        <ul>
            <li ng-repeat="json in arr2">姓名：{{json.user}}，年龄：{{json.age}}</li>
        </ul>
    </div>
    <div ng-init="json={a: 12, b: 5, c: 3}">
        <ul>
            <li ng-repeat="(k,v) in json">{{k}}, {{v}},{{$index}}</li>
        </ul>
    </div>
    <div ng-init="arr3=[12,5,8]">
        <ul>
            <li ng-repeat="(index,val) in arr3">{{index}}, {{val}}</li>
        </ul>
        <ul>
            <li ng-repeat="val in arr3">{{$index}}, {{val}}</li>
        </ul>
    </div>
</body>

</html>

ng-style实例:

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">菜鸟教程</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.myObj = {
        "color" : "white",
        "background-color" : "coral",
        "font-size" : "60px",
        "padding" : "50px"
    }
});
</script>
</body>

ng-bind-html实例:

<!DOCTYPE html>
<html>

<head>
    <title>ng-bind-html</title>
    <script src="js/angular.js" charset="utf-8"></script>
</head>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        未处理的：
        <div ng-repeat="item in formData">
            {{item.name}} :
            <p ng-bind="item.htmlVal"></p>
        </div>
        <br/>处理过的：
        <button ng-click="look()">查看处理结果</button>
        <div ng-repeat="item in data">
            {{item.name}} :
            <p ng-bind-html="item.htmlVal"></p>
        </div>
    </div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $sce) {
    //未处理数据源
    $scope.formData = [
        { "name": "张春玲", "htmlVal": "我是<span style='color:red;'>张春玲<span>" },
        { "name": "sb", "htmlVal": "我是<span style='color:red;'>sb<span>" }
    ];

    //处理结果
    $scope.look = function() {
        $scope.data = [
            { "name": "张春玲", "htmlVal": "我是<span style='color:red;'>张春玲<span>" },
            { "name": "sb", "htmlVal": "我是<span style='color:red;'>sb<span>" }
        ];
        $scope.data.forEach( function(element, index) {
            element.htmlVal = $sce.trustAsHtml(element.htmlVal);
        });
    };

});
</script>

</html>

posted @ 2018-02-20 16:54 爱喝酸奶的吃货阅读(212) 评论(4) 收藏举报

刷新页面返回顶部

爱喝酸奶的吃货

你没空时不会做的事情，有空了也不会做.