Angular(ng 作用域和控制器)

html部分

.............................................................

<!doctype html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>ng 作用域和控制器</title>
</head>
<body>
<div ng-controller="Counter">
    <span>输入增量:</span>
    <input type="number" ng-model="change"><hr>
    <span>起始值:</span>
    {{start}}
    <br>
    <span>起始值+增加:</span>
    {{current}}
    <button ng-click='inc()'>累加增量</button>
    <button ng-click='dec()'>累减增量</button><hr>
    <span>与起始值比较:</span>
    {{difference}}
</div>
</body>

<script src="js/angular-1.3.0.js"></script>
<script src="js/作业1_scope和控制器.js"></script>
</html>
................................................................................................
Js部分

myApp=angular.module("myApp",[]);
myApp.controller("Counter",function ($scope) {
    $scope.start=200;
    $scope.change=1;

  $scope.inc=function () {
      $scope.change++;
      $scope.current= $scope.start+$scope.change;
      $scope.difference=$scope.current-$scope.start;
  },
    $scope.dec=function () {
        $scope.change--;
        $scope.current= $scope.start+$scope.change;
        $scope.difference=$scope.current-$scope.start;
    }
})
posted @ 2017-05-29 16:35  YoogaChan  阅读(246)  评论(0)  编辑  收藏  举报