angularjs学习笔记（一）

最新推荐文章于 2022-05-21 22:39:38 发布

暴躁小哥在线搬砖

最新推荐文章于 2022-05-21 22:39:38 发布

阅读量226

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： angular.js angular标签

本文链接：https://blog.youkuaiyun.com/new_zp/article/details/90199350

Angular 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了在单页应用中加载多个AngularJS ng-app的问题及解决方案，详细讲解了如何手动加载额外的ng-app，以及如何使用ng-model和ng-repeat进行数据绑定和模板循环。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div ng-app:

当在单个页面上加载了多个 ng-app 时，只有第一个会起作用。

查询后找到答案：在 angular 页面中，每一个 HTML 页面只有一个 ng-app 会被自动装载。

解决方案：其余的ng-app 可手动加载。

代码:

<div ng-app="first" 
        <p>我的第一个表达式: {{ 5 + 5 }}</p>
    </div>
    <div id="divSecond" ng-app="second" ng-controller="secondController">
 
        <p>总价： {{ quantity * cost }}</p>
 
    </div>
    <script>
        var app = angular.module('second', []);
        app.controller('secondController', function ($scope) {
            $scope.quantity = 1;
            $scope.cost = 5;
        });
        angular.bootstrap(document.getElementById("divSecond"), ['second']);//使用angular.bootstrap() 完成模块的手动加载

    </script>

ng-model

可绑定input数据，并且对多组数据进行操作


    <div id="divThird" ng-app="third" ng-controller="thirdController">
        数量：<input type="type" name="name" value="" ng-model="num" />
        价格：<input type="type" name="name" value="" ng-model="price" />
           <br />
           <p>总价：<span>{{num*price}}</span></p>//计算两个model总和
    </div>

ng-repeat

angular.js 中的模板循环指令

 <div ng-app="">
        <p>我的第一个表达式: {{ 5 + 5 }}</p>
    </div>
    <div id="divSecond" ng-app="second" ng-controller="secondController">

        <p>总价： {{ quantity * cost }}</p>
        <p>总价：<span ng-bind="quantity * cost"></span></p>

    </div>
    <div id="divThird" ng-app="third" ng-controller="thirdController">
        数量：<input type="type" name="name" value="" ng-model="num" />
        价格：<input type="type" name="name" value="" ng-model="price" />
        <br />
        <p>总价：<span>{{num*price}}</span></p>
        <p>使用 ng-repeat 来循环数组</p>
        <ul>
            <li ng-repeat="x in names"> //循环标签
                {{ x }}
            </li>
        </ul>
    </div>
    <script>
        var app = angular.module('second', []);
        app.controller('secondController', function ($scope) {
            $scope.quantity = 1;
            $scope.cost = 5;
        });
        angular.bootstrap(document.getElementById("divSecond"), ['second']);//使用angular.bootstrap() 完成模块的手动加载
        var app = angular.module('third', []);
        app.controller('thirdController', function ($scope) {
            $scope.names = ['Jani', 'Hege', 'Kai'];   //被循环的对象
        });
        angular.bootstrap(document.getElementById("divThird"), ['third']);//使用angular.bootstrap() 完成模块的手动加载
    </script>