AngularJS參數綁定 --AngularJS

時間 2019-11-22

原文原文鏈接

AngularJS參數綁定有三種方式。第一種插值表達式「｛｛｝｝」表示，第二種在標籤中使用ng-bind屬性表示，第三種針對input框(標籤)的ng-module屬性表示。針對三種參數綁定方式，設定了如下三個小案例。html

一、插值表達式app

案例核心代碼：spa

demo01.html:雙向綁定

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>AnjularJS數據綁定-插值表達式</title>
</head>
<body>
<div ng-controller="demo01Controller">
    <span>{{name}}</span>
    <span>{{num1+num2}}</span>
    <span>{{num1*num2}}</span>
    <span>{{obg.address}}</span>
    <span>{{address[0]}}</span>
    <ul>
        <li ng-repeat="item in address track by $index">{{item}}</li>
    </ul>
    <ul>
        <li ng-repeat="item in university">
            {{item.name}}
            <ul>
                <li ng-repeat="childItem in item.xueyuan">{{childItem}}</li>
            </ul>
        </li>
    </ul>
</div>
<script src="../js/angular.min.js"></script>
<script src="../js/app_module.js"></script>
<script src="../js/demo01Controller.js"></script>
</body>
</html>

案例效果：htm

二、ng-bindblog

案例核心代碼：ip

demo02.html:get

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>AnjularJS數據綁定-ng-bind表示</title>
</head>
<body>
<div ng-controller="demo02Controller">
    <span ng-bind="name"></span>
    <span ng-bind="num1+num2"></span>
    <span ng-bind="num1*num2"></span>
    <span ng-bind="obg.address"></span>
    <span ng-bind="adress[0]"></span>
    <ul>
        <li ng-repeat="item in address track by $index" ng-bind="item"></li>
    </ul>
    <ul>
        <li ng-repeat="item in university">
            {{item.name}}<!--這裏用插值表達式,考慮爲何？-->
            <ul>
                <li ng-repeat="childItem in item.xueyuan" ng-bind="childItem"></li>
            </ul>
        </li>
    </ul>
</div>
<script src="../js/angular.min.js"></script>
<script src="../js/app_module.js"></script>
<script src="../js/demo02Controller.js"></script>
</body>
</html>

案例效果：（同1）input

三、ng-moduleit

案例核心代碼：

demo03.html：

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>AnjularJS數據綁定-ng-module(針對input框)表示</title>
</head>
<body>
<div ng-controller="demo03Controller">
    <input type="text" ng-model="name">
    <!--雙向綁定-->
    <p>{{name}}</p><!--或者是<p ng-bind="name"></p>-->
</div>
<script src="../js/angular.min.js"></script>
<script src="../js/app_module.js"></script>
<script src="../js/demo03Controller.js"></script>
</body>
</html>