javascript - 使用 AngularJS 尝试在中间插入一个 <tr>-6ren

javascript - 使用 AngularJS 尝试在中间插入一个

转载作者：行者123 更新时间：2023-11-30 21:14:58

在这里，我试图在选定的 tr 标签下插入一个 tr 标签。我设法在表格中插入了 tr但它在底部。这是示例代码:

"use strict";

(function(angular) {
    var app = angular.module('app', []);
    app.controller('MainController', MainController);

    MainController.$inject = ['$compile', '$scope', '$templateCache'];

    function MainController($compile, $scope, $templateCache) {
        var publishShown = false;
        var lastItemAppned;
        var vm = this;
        vm.targets = ['Single passenger', 'Single driver', 'All passengers', 'All drivers'];
        vm.items = ["Cheese", "Pepperoni", "Black Olives"];
        vm.cancel = cancel;
        vm.fruits = [{
            name: 'Orange',
            color: 'Orange',
            tree: 'Orange Tree!',
            origin: 'China'
        }, {
            name: 'Apple',
            color: 'Green',
            tree: 'Apple Tree!',
            origin: 'Moon'
        }];
        vm.message = 'Fruit store!';

        function appendTemplate(event) {
            if (publishShown) {
                removeLastAppend();
            }
            publishShown = true;
            var template = $templateCache.get('template.html');
            var compiledHtml = $compile(template)($scope);
            var parent = event.currentTarget.parentElement.parentElement.parentElement;
            parent.append(compiledHtml[0]);
        }

        vm.showOptions = function(event) {
            appendTemplate(event);
        }

        function removeLastAppend() {
            angular.element('#publish-template').remove();
        }

        function cancel() {
            removeLastAppend();
        }

    }
})(window.angular);

<!DOCTYPE html>
<html ng-app="app">

<head>
    <link data-require="bootstrap-css@3.*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="Tether@*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <script data-require="angularjs@1.6.*" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
    <script data-require="angular-animate@1.6.*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-animate.js"></script>
    <script data-require="angular-touch@1.6.*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-touch.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.5.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body ng-controller="MainController as vm">
    <script type="text/ng-template" id="template.html">
        <tr id="publish-template">
            <td colspan="5">
                <div class="row">
                    <div class="col-sm-3">
                        <button class="btn btn-sm btn-success" ng-click="vm.command()">Command</button>
                    </div>
                    <div class="col-sm-3">
                        <button class="btn btn-sm btn-primary" ng-click="vm.sell()">Sell</button>
                    </div>
                    <div class="col-sm-3">
                        <button class="btn btn-sm btn-warning" ng-click="vm.eatSome()">Eat some!</button>
                    </div>
                    <div class="col-sm-3">
                        <button class="btn btn-sm btn-danger" ng-click="vm.cancel()">Cancel</button>
                    </div>
                </div>
            </td>
        </tr>
    </script>
    <div class="container-fluid">
        <h1>{{vm.message}}</h1>
        <table class="table">
            <thead>
                <th>Name</th>
                <th>Color</th>
                <th>Tree</th>
                <th>Origin</th>
                <th>Action</th>
            </thead>
            <tbody>
                <tr ng-repeat="fruit in vm.fruits">
                    <td>{{fruit.name}}</td>
                    <td>{{fruit.color}}</td>
                    <td>{{fruit.tree}}</td>
                    <td>{{fruit.origin}}</td>
                    <td>
                        <button class="btn btn-primary" ng-click="vm.showOptions($event)">Options</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

如您所见，如果您单击第二个选项按钮，您不会注意到问题，但如果您单击第一个选项按钮，它会始终在表格底部添加一个 tr 标记!

我的目的是在selected on下添加新的tr。提前致谢

最佳答案

ng-repeat 正在 tr 元素上运行，您希望打破循环并根据单击的行在中间插入另一个 tr。为此，您需要将表格分成 3 个部分

在 topFruits 上 TR ng-repeat
带有选项按钮的 TR 行(最初会隐藏)
TR ng-repeat bottomFruits

最初，您需要将所有水果分配给 topFruits 并保持 bottomFruits 为空。同时保持 tr 行隐藏选项按钮。

当点击某一行的显示选项按钮时，获取该行的索引，然后根据索引在 topFruits 和 bottomFruits 之间划分水果。同时使带有按钮的行可见。

这是一个working demo

这是 HTML 正文

<body ng-controller="MainCtrl as vm">
    <div class="container-fluid">
        <h1>{{vm.message}}</h1>
        <table class="table">
            <thead>
               <tr>
                <th>Name</th>
                <th>Color</th>
                <th>Tree</th>
                <th>Origin</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
                  <tr ng-repeat="fruit in vm.topFruits">
                    <td style="background:#bbb">{{fruit.name}}</td>
                    <td>{{fruit.color}}</td>
                    <td>{{fruit.tree}}</td>
                    <td>{{fruit.origin}}</td>
                    <td>
                        <button class="btn btn-primary" ng-click="vm.showOptionsTop($index)">Options</button>
                    </td>
                  </tr>
                  <tr id="publish-template" style="display:none">
                    <td colspan="5">
                      <div class="row">
                        <div class="col-sm-3">
                          <button class="btn btn-sm btn-success" ng-click="vm.command()">Command</button>
                        </div>
                      <div class="col-sm-3">
                        <button class="btn btn-sm btn-primary" ng-click="vm.sell()">Sell</button>
                      </div>
                      <div class="col-sm-3">
                        <button class="btn btn-sm btn-warning" ng-click="vm.eatSome()">Eat some!</button>
                      </div>
                      <div class="col-sm-3">
                        <button class="btn btn-sm btn-danger" ng-click="vm.cancel()">Cancel</button>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr ng-repeat="fruit in vm.bottomFruits">
                    <td  style="background:#fcc">{{fruit.name}}</td>
                    <td>{{fruit.color}}</td>
                    <td>{{fruit.tree}}</td>
                    <td>{{fruit.origin}}</td>
                    <td>
                        <button class="btn btn-primary" ng-click="vm.showOptionsBottom($index)">Options</button>
                    </td>
                  </tr>
            </tbody>
        </table>
    </div>
</body>

这是 Controller 代码

 vm.fruits = [{
            name: 'Orange',
            color: 'Orange',
            tree: 'Orange Tree!',
            origin: 'China'
        }, {
            name: 'Apple',
            color: 'Green',
            tree: 'Apple Tree!',
            origin: 'Moon'
        }];
        vm.topFruits = vm.fruits;
        vm.bottomFruits = [];
        vm.message = 'Fruit store!';

        function appendTemplate(index) {

            if (vm.publishShown) {
                removeLastAppend();
            }
            vm.publishShown = true;
            vm.topFruits = [];
            vm.bottomFruits = [];
            document.getElementById('publish-template').style.display="block";
            for(i=0;i<vm.fruits.length;i++) {
              if(i<=index) {
                vm.topFruits[i] = vm.fruits[i];
              } else {
                vm.bottomFruits[i-vm.topFruits.length] = vm.fruits[i];
              }
            }
        }

        vm.showOptionsTop = function(index) {
        appendTemplate(index);
    }
       vm.showOptionsBottom = function(index) {
        appendTemplate(index+vm.topFruits.length);
    }

        function removeLastAppend() {
            document.getElementById('publish-template').style.display="none";
            vm.publishShown = false;
        }

        function cancel() {
            removeLastAppend();
        }

关于javascript - 使用 AngularJS 尝试在中间插入一个 <tr>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45777670/

文章推荐： c# - LargeImages 到 WPF ListView 端口

javascript - 如何在单击 (选定的 tr)时获取所有下一个数据 ID
我想要数组中所选 tr 的所有下一个 tr 的 data-id。我使用此代码，但这不是一个好代码。 var ids = Array.prototype.slice.call($("tr.selecte
javascript - 使用 Javascript，如何在悬停时在另一个之上显示一个，隐藏第二个？
JSFiddle:http://jsfiddle.net/9u8tnh97/ 我正在使用 jQuery 和 Bootstrap。我有一张 table 4 像这样的元素:
javascript - .appendChild(tr) 创建没有数据的 tr
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
regex - 为什么大括号前的反斜杠使我的正则表达式匹配和
在 Notepad++ 中，我试图制作一个正则表达式来匹配标签。起初，我认为必须转义大括号，所以我尝试了 \ .然而，这不仅符合我预期的开始标签，而且匹配所有。 s( 和 )。这是为什么？最佳答
javascript - 定位最后一个父表行 (tr)，而不是子表行 (tr)
我正在尝试定位其中包含子表行元素的表中的最后一个父表行。我已尝试使用下面的 jQuery 来定位 :last 伪值，但是，如预期的那样，它的目标是目标父表中的绝对最后一个表行元素。 $('table[
javascript - 如何使用纯JS在每个之后插入
我想插入新的在每个现有的之后。我的功能: var element = document.querySelector('tr.cart-item'); var newElement = docume
javascript - 匹配标签的正则表达式只匹配表中的第一个和最后一个
这个问题在这里已经有了答案: RegEx match open tags except XHTML self-contained tags (35 个答案) 关闭 9 年前。我希望这个正则表达式匹
javascript - 如何将垂直更改为水平
生成此代码是为了做两件事。第一个是单击复选框时突出显示表记录。第二个是即使页面刷新也能记住结果。 Untitled Document
javascript - 通过 tr 数组中的属性查找某个 tr
嗨，我正在尝试在 tr 数组中查找 tr属性名称是 docId 是否有任何类型的 jquery 选择器？我不想只用 for 循环遍历数组然后自己去找。除非你说我别无选择... 谢谢最佳答案如果
javascript - 如何在单击时打开 tr 内的表 tr
我有一张 table ，我想在单击加号图标时在 tr 中打开相同的 tr。我不明白我使用哪个 html 元素打开。请帮帮我。提前致谢。
python - BeautifulSoup - 输出中的空白行导致奇怪的无用
对你来说是个小问题:-) 我正在使用 BeautifulSoup 来解析 HTML 页面中表格的内容。问题是在我的输出文件的每一行(CSV/EXCEL)之间，它拉出一个空行......这是 HTML
html - 悬停会影响表格中的其他
我制作了一个包含基本信息的表格，每个奇数行和偶数行都有不同的颜色。在 :hover影响它是橙色的，不管它是偶数还是奇数。但是当我想“分组”3 我发现了一个问题。我试着把它包装成但它没有用。我的目标
python - 如何选择除最后两个 tr 之外的所有 tr
在 lxml 中，我使用 xpath 选择表(具有不同行数)中的所有 tr，除了包含乱码的最后两行。是否有排除最后两行的模式匹配？我正在浏览 xpath 教程，显然有一个“except”运算符和一个
javascript - 我们可以在 `` 之后使用嵌套表吗？
我在表列表中显示来自数据库的记录。此外，我在每一行中都有一个跟进按钮，如果任何用户单击跟进按钮，则会为特定用户打开一个包含详细信息的弹出窗口。或者任何其他想法来处理这个问题？我试过用这样的东西
jquery - 如何在当前之后附加新
我有以下表格结构。当我点击时我想添加新的在旁边其中被点击。所以结果会是:
css - 使 1 tr 和 4 td 仅通过 CSS 表现得像 : 2 tr with 1 td in each and 1 tr with 2 td in,
使用这个 HTML: 1 2 3 4 我得到这个输出: 1 2 3 4 但我想要的是: 1 2 3 4 如何
javascript - 如何在单击 TR 时选择它并在单击另一个 TR 时删除选择
嗨，我有一个表格，我在这里做了一些代码来将表格更改为可编辑和可选择...我的要求是 1.当点击一个TR时，它应该变成蓝色，再次点击另一个TR，它将显示蓝色，旧的TR变成白色(威胁不可选择) 我由于一些
javascript - 我动态生成了2个，我想获取我点击的的数据
这个问题可能令人困惑，但这就是确切的情况.. 我已经动态生成了一些(根据从数据库获取的数据)，现在我想允许用户选择其中一个单选按钮，并且我想捕获所单击的行的详细信息，因此请检查我的代码并协助我的aj
jquery - 使用jquery将 html更改为...
免责声明:HTML、JQuery、Ajax 技能水平 — 垃圾。一直是一个厚客户。我有一个表单，允许用户输入客户代码和电子邮件地址。我想在客户代码有效时显示客户的姓名。我会错误地通过 Ajax 和
jQuery 在其他元素之后添加元素
正在尝试添加其他元素表中的元素根据的行跨度该特定元素元素。在同一功能中，单击中的此按钮后元素的行数每次增加1，因此也需要增加行数。不知道该怎么做。也许使用 slice()以某种方式发挥作

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 AngularJS 尝试在中间插入一个