wang00ka 2018-10-09 07:36 采纳率: 75%
浏览 354
已采纳

用angularjs实现图中需要的功能，请问怎么做？

图片说明

  • 写回答

2条回答 默认 最新

  • 斯洛文尼亚旅游 2018-10-09 08:26
    关注
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
       <table border="0">
           <tr><td>内容1</td><td>内容2</td><td>&nbsp;</td></tr>
           <tr><td><input type="text" ng-model="content1" /></td><td><input type="text" ng-model="content2" /></td><td><input type="button" value="确认" ng-click="addItem()" /></td></tr>
       </table><br />

        <table border="1">
            <tr><td>内容1</td><td>内容2</td><td>操作</td></tr>
            <tr ng-repeat="item in list"><td>{{item.content1}}</td><td>{{item.content2}}</td><td><input type="button" value="删除" ng-click="removeItem($index)" /></td></tr>
        </table>
    </div>
    <script>
        angular.module('myApp', [])
        .controller('myCtrl', ['$scope', function ($scope) {
            $scope.list = []
            $scope.addItem = function () {
                $scope.list.push({ content1: $scope.content1, content2: $scope.content2 });
                $scope.content1 = $scope.content2 = ''
            };
            $scope.removeItem = function (index) {
               $scope.list.splice(index,1)
            };
        }]);
    </script>
</body>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • 使用node做服务器前端angularjs实现高德地图上的多点标记
    2019-08-10 02:40
    在本文中，我们将深入探讨如何使用Node.js作为服务器端，并结合AngularJS在前端实现高德地图上的多点标记功能。这个技术栈可以帮助开发者构建交互性强、动态的地图应用。以下是实现这一功能所需的关键知识点： 1. *...
  • angularjs实现简单的购物车功能
    2020-10-19 04:55
    AngularJS实现简单的购物车功能涉及了前端开发中常见的交互模式，即用户可以通过界面上的按钮增加或减少购物车中商品的数量，并能够查看总金额。此功能对于理解AngularJS的双向数据绑定、作用域($scope)、指令、过滤...
  • AngularJs基于角色的前端访问控制的实现
    2020-11-28 10:34
    最近做的项目是使用Angular做一个单页应用，但因为用户有不同的角色（管理员、编辑、普通财务人员等），所以需要进行不同角色的访问控制。 因为后端访问控制的经验比较丰富，所以这里只记录了前端访问控制的实现。请...
  • angular 上传图片并显示_AngularJS实现图片上传和预览功能的方法分析
    2021-01-13 12:16
    weixin_39616003的博客 html5原生方法先看一下html5原生方法上传和预览图片的实现：我们看到，需要用到onchange事件来获得上传的文件，当项目使用上angularjs时，很自然的，我们想到了ng-change指令，然而不幸的是，在angularjs中，附录1)...
  • AngularJS前端页面操作之用户修改密码功能示例
    2020-12-12 00:15
    最近在做前端设计，主要使用的知识有AngularJS和nodejs来进行页面显示和数据请求、处理等工作。在设计页面比如忘记密码时，发现一个有效的设计思路是很重要的。 就以修改密码为例，要将提示信息友好的展示给用户，...
  • angularjs实现柱状图动态加载的示例
    2020-10-18 22:17
    综上所述，文章的示例说明了如何使用AngularJS来创建一个动态加载的柱状图，涵盖了AngularJS的基础知识、指令的创建和作用、数据绑定、以及如何在AngularJS中集成第三方库（如jQuery）进行复杂的DOM操作和动画效果。...
  • AngularJS实现数据列表的增加、删除和上移下移等功能实例
    2020-10-21 14:22
    在本文中，我们将深入探讨如何使用AngularJS实现这些列表管理功能，并提供相关的代码实例。首先，为了实现这些功能，我们需要定义一个AngularJS模块以及相关的控制器。控制器中定义了列表数据以及相关操作函数，例如...
  • Angularjs中ng-repeat的简单实例
    2020-10-19 07:45
    在讲解AngularJS中ng-repeat指令的使用实例之前，我们需要先对AngularJS和ng-repeat指令做一个基本的了解。 AngularJS是Google开发的一个开源的前端JavaScript框架，用来开发动态网页。它通过HTML的扩展（即所谓的...
  • AngularJS 实现JavaScript 动画效果详解
    2020-10-21 13:52
    在AngularJS中实现JavaScript动画效果是一项增强用户交互和体验的重要技术。AngularJS作为一个强大的前端框架，内置了对动画的支持，允许开发者轻松地在应用中添加动态视觉效果。本文将深入探讨如何利用AngularJS的...
  • 没有解决我的问题, 去提问