angular js实现email实时编辑

最新推荐文章于 2024-02-28 18:51:02 发布

置顶 qq_3158353

最新推荐文章于 2024-02-28 18:51:02 发布

阅读量1k

点赞数

分类专栏： angular js

本文链接：https://blog.csdn.net/qq_31558353/article/details/50217445

版权

angular js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.html代码
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div ng-controller="MyController">
        <input ng-model="person.name" type="text" placeholder="your name"/>
        <h1>hello parent {{person.name}}</h1><br />
        <hr />
        <img src="D:\Project\server\src\web\img\test.png" />
        <h2>price:{{price}}</h2><h5>限购五件</h5>
        <button ng-click="add(1)">+</button>
        <button ng-click="subtract(1)">-</button>
        <h4>current count:{{total}}</h4>
        {{timenow}}
        <div ng-controller="MyControllerSon">
            <button ng-click="sayhello()">say hello</button>
            <h2>hello 子控制器 {{person.name}}</h2>
            <input ng-model="to" type="text" placeholder="Recipient" />
            <textarea ng-model="emailBody"></textarea>
            <pre>{{previewText}}</pre>
        </div>
    </div>
</body>
</html>
2.js代码
<!DOCTYPE html>
<script src="js/angular.js"></script>
<!--<script>
    // var app = angular.module('app')
    //$scope.i = 0;
    //$scope.j = 188;
    //$scope.priceClick = function()
    //{
    //    i++;
    //};
</script>-->
<script>
    var app = angular.module('myApp', []);
    app.controller('MyController', function ($scope) {
        $scope.person = {name:'weijie'};
        $scope.counter = 0;
        $scope.price = 199;
        $scope.total = 0;
        $scope.clock = { now: new Date() };
        $scope.add = function (x)
        {
            if ($scope.counter < 5)
            {
                $scope.counter = $scope.counter + x;
                $scope.total = $scope.counter * $scope.price;
            }
        };
        $scope.subtract = function (x)
        {
            if ($scope.counter > 0)
            {
                $scope.counter = $scope.counter - x;
                $scope.total = $scope.counter * $scope.price;
            }
        };
            var updateClock = function()
            {
                $scope.clock.now = new Date();
                $scope.timenow = deal($scope.clock.now);


            };
            setInterval(function()
            {
                $scope.$apply(updateClock)
            }, 1000);
            var deal = function (x) {
                return x.toDateString().replace(x.getYear(), "") + x.toTimeString().replace("UTC+0800", "");
            };
    });
    app.controller('MyControllerSon', function ($scope,$interpolate) {
        $scope.sayhello = function () {
            $scope.person.name = 'rose';
        };
        $scope.$watch('emailBody', function(body) 
        {
            if (body) {
                var template = $interpolate(body);
                $scope.previewText =
                template({ to: $scope.to });
            }
         });
    });
</script>