zoukankan      html  css  js  c++  java
  • 使用AngularJS 添加行修改、删除表格数据

    https://blog.csdn.net/xin_x1n/article/details/53070144


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <title></title>
    </head>
    <body>

    <div ng-app="myApp1" ng-controller="myCtrl1" ng-init="names=[
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}]">

    <p>循环对象:</p>
    <table ng-repeat="y in names">
    <tr>
    <td>
    <input value="{{ y.name }}" />
    </td>
    <td>{{ y.country }}</td>
    <td>
    <input type="button" ng-click="count = count + 1" value="{{ y.name + ', ' + y.country }}" /></td>
    </tr>
    </table>
    <table>
    <tr>
    <th>id</th>
    <th>productname</th>
    <th>productid</th>
    <th>
    <input ng-click="add()" value="add" /></th>
    </tr>
    <tbody ng-repeat="z in arrs">
    <tr>
    <td>{{$index}}</td>
    <td>
    <input ng-model="z.productid" value="{{z.productid}}"></td>
    <td>
    <input ng-model="z.productname" value="{{z.productname}}"></td>
    <td>
    <input ng-click="updata($index)" value="update" /></td>
    </tr>
    </tbody>
    </table>

    <button ng-click="count = count + 1">点我!</button>

    <p>{{ count }}</p>

    </div>


    <%--<div ng-app="myApp2" ng-init="names=[
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}]">

    <p>循环对象:</p>
    <table ng-repeat="y in names">
    <tr>
    <td>
    <input value="{{ y.name }}" />
    </td>
    <td>{{ y.country }}</td>
    <td>
    <input type="button" /></td>
    </tr>
    </table>


    <ul>
    <li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li>
    </ul>

    </div>--%>

    <script>
    var app = angular.module('myApp1', []);
    app.controller('myCtrl1', function ($scope) {
    //$scope表示作用域对象,每个控制器都有自己的作用域对象
    $scope.arrs = [
    { "productid": "FI-SW-01", "productname": "Koi" },
    { "productid": "K9-DL-01", "productname": "Dalmation" },
    { "productid": "RP-SN-01", "productname": "Rattlesnake" },
    { "productid": "RP-LI-02", "productname": "Iguana" },
    { "productid": "FL-DSH-01", "productname": "Manx" },
    { "productid": "FL-DLH-02", "productname": "Persian" },
    { "productid": "AV-CB-01", "productname": "Amazon Parrot" }
    ];


    //定义一个空对象 , 用于更新和保存数据时临时存储
    $scope.prod = {};

    //定义一个全局变量idx , 用于存储选中行的索引,方便执行保存操作时保存数据
    var idx = -1;

    //定义一个单击修改按钮时触发的事件,用于单击后弹出模块窗口用于修改数据
    $scope.updata = function ($index) {

    ////显示bootstrap中的模块窗口
    //$('#modal-1').modal('show');

    //将选中行的数据绑定到临时对象prod中,在下面的模态窗口中展示出来
    $scope.prod.productid = $scope.arrs[$index].productid;
    $scope.prod.productname = $scope.arrs[$index].productname;
    //选中行的索引赋值给全局变量idx
    idx = $index;
    alert($scope.prod.productid)
    };

    //定义一个单机保存按钮时触发的事件,
    $scope.save = function () {
    //将修改后的值赋给数组
    $scope.arrs[idx].productid = $scope.prod.productid;
    $scope.arrs[idx].productname = $scope.prod.productname;
    //关闭模块窗口
    //$('#modal-1').modal('hide');
    }
    $scope.add = function () {
    $scope.arrs.push({ "productid": "2222", "productname": "33333t" })
    }

    $scope.count = 0;
    });
    </script>

    </body>
    </html>

  • 相关阅读:
    C++之STL一般总结
    QT学习第2天
    Linux下Awk详解(转载)
    Mac下开启FTPserver
    Mac下QT错误,Xcode配置解决办法
    C++之STL
    关于Java自动拆箱装箱中的缓存问题
    二分查找
    冒泡排序及优化
    Java中String常用方法总结
  • 原文地址:https://www.cnblogs.com/yyzyou/p/9623033.html
Copyright © 2011-2022 走看看