zoukankan      html  css  js  c++  java
  • AngularJS--day06-多控制器思想-协同开发-文件页分模块(在此文章没有体现出来)

    <<!DOCTYPE html>
    <html ng-app='app' ng-controller='mainController'>
        <head>
            <meta charset="utf-8">
            <title>多控制器思想-协同开发</title>
            <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
        </head>
        <body>
            <br /><br /><br />
            <div class="container" ng-controller='commentController'>
                <div class="row" >
                    <div class="col-xs-3"></div>
                    <div class="col-xs-6">
                        <!-- 评论模块 -->
                        <div class="input-group">
                            <input type="text" class="form-control" />
                            <span class="input-group-btn" ng-model='comt'>
                                <button class="btn btn-primary" ng-click='submitComment(comt)'>评论</button>
                            </span>
                        </div>
                        <!-- 评论标题 -->
                        <h2 ng-show='commentArr.length>0'>评论</h2><!-- 有显示 -->
                        <!-- 评论内容 -->
                        <ul class="list-group">
                            <li class="list-group-item" ng-repeat='comment in commentArr track by $index'>
                                <span>{{comment}}</span>
                                <a href="javascript:;" class="btn btn-link" ng-click='deleteComment($index)'>删除本条评论</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-xs-3"></div>
                </div>
            </div>
            <ul ng-controller='namelistController'>
                <li ng-repeat='liInfo in liInfoList track by $index'>{{liInfo}}</li>
            </ul>
            <script src="angular.js"></script>
            <script>
                var app = angular.module('app',[]);
                app.controller('mainController',['$scope',function($scope){
                    
                    
                }]);
                //评论控制器
                app.controller('commentController',['$scope',function ($scope){
                    $scope.commentArr = [];
                    //评论功能
                    $scope.submitComment = function (comt){
                        $scope.commentArr.push(comt);
                        $scope.comt = '';
                    };
                    //删除评论
                    $scope.deleteComment = function(index){
                        $scope.commentArr.splice(index,1);//.splice(index,howmany,item1,.....,itemX)index    必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
                    };
                }]);
                //名称列表控制器
                app.controller('namelistController',['$scope',function ($scope){
                    $scope.liInfoList = ['22','33','44'];
                }]);
            </script>
        </body>
    </html>
  • 相关阅读:
    【转载】常考算法模板
    NOIP2020微信步数暴力80分
    NOIP2020移球游戏快速排序满分程序
    第一场NOI Online能力测试入门组B跑步
    【转】STL之Set——插入元素、二分查找元素(log级别)
    [转载]图论500题
    差分约束系统简单介绍(入门)
    辗转相除法的证明
    并查集2个优化——按秩合并和路径压缩
    递推算法之平面分割问题总结
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11423893.html
Copyright © 2011-2022 走看看