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

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

图片说明

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 已采纳
     <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>
    
    已采纳该答案
    打赏 评论
  • Qshu 2018-10-09 07:48

    用ng-model指令绑定内容1、内容2, ng-model="content1" ng-model="content2" $scope.content1,$scope.content2就是imput框里内容1内容2的值;

    点击确认后进行数据传值

    下面的也用ng-model绑定 ng-model="content3" ng-model="content4" 把$scope.content1,$scope.content2分别赋值给$scope.content3,$scope.content4这样表格中的数据就添加进去了

    删除的话就把$scope.content3,$scope.content4设为空$scope.content3=“”,$scope.content4=“”

    打赏 评论

相关推荐 更多相似问题