Question

我使用ng-grid设置了AngularJS网格，该网格显示了一些表格数据（在附带的示例中，它是一个简化版本，因为它需要从REST服务收集数据）。此示例包含一个用于创建新行的按钮：

<head lang="en">
<style = "text/css">
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px
}
</style>
        <meta charset="utf-8">

        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
    </head>

<script language="javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
    $scope.gridOptions = { data: 'myData' };

    $scope.addRow = function() {                         
        $scope.myData.push({name: 'Empty', age: 0});                             
    };

});
</script>


<body ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>

          <button ng-click="addRow()">New</button>
    </body>
</html>

现在我想用一个新的替换addRow函数，该函数打开一个模态对话框，您可以在其中输入数据，然后将其插入$ scope.myData中。我在Web上找到了一些像Ui Bootstrap这样的选项，但是我找到的所有例子都包括添加新的依赖项，还有一个用于管理对话框的控制器以及一些在两个控制器之间共享数据的机制。作为AngularJS的新手，它有点矫枉过正，所以我想知道这是否可以通过更简单的方式实现。任何的想法？谢谢

Answer 1

您可以添加一个默认隐藏的单独div，并添加您的模型（数据）。数据可以由ng-click事件或jquery $('button').click(function(event){})填充（虽然这不是真的角度方式，你应该使用一个指令，但jquery工作）。因此，每当用户单击用于添加行的按钮时，您将使用表单显示div并将其提交给您处理数据的控制器（或指令）并将其添加到您的范围。

总结一下：按钮单击显示隐藏的div，其中包含将数据发布到您要处理以保存和显示的控制器的表单。可以使用指令或只是简单的$（＆＃39; divname＆＃39;）jquery。如果您打算使用jquery，请确保在需要时使用$scope.$apply(function(){})，否则您将无法看到您的更改。

由于我自己和一些对Angular不熟悉的同事一起工作Angular项目，似乎在我的控制器中使用jquery是他们理解发生什么的一种方式，即使不是真的角的方式。然后，如果您是初学者，这似乎更快速地编码和理解。只知道你还有东西需要学习。我已经拥有相同的经验，在每个项目中，我都向前迈出了一小步，做了越来越多的角度方式

在AngularJS中显示对话框并从中返回数据的最简单方法

1 个答案: