17

我很困惑在创建我的应用程序时要开始。

当我单击添加按钮时，我想显示一个表单 - 我是否将 div 附加到该按钮？

我该如何攻击这个？

代码：

<body>
<div id="wrap">

  <!-- Begin page content -->
  <div classa="container">
    <div class="page-header">
      <h1>Birthday Reminders</h1>
    </div>
       <p>Data Here</p>
  </div>

  <div id="push"></div>
</div>

<div id="footer">
  <div class="container">
    <a href="#">Add</a>
  </div>
</div>
    <script type="text/javascript" src="js/cordova-2.5.0.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
4

3 回答 3

70

好的，从上到下！:-)

首先，你必须在某个地方告诉 AngularJS 你正在使用它。标签和body任何地方一样好：<body ng-app="myApp">. 这告诉 AngularJS 使用一个称为myApp应用程序根的模块。所以现在让我们定义它：

// app.js

var app = angular.module( 'myApp', [] );

第二个参数是一个依赖数组。我们现在不用担心这个了。所以现在我们有了一个模块。AngularJS 是一个MVC框架，所以我们还需要在某个地方定义一个控制器。让我们将其添加到我们的app.js文件中：

app.controller( 'MainCtrl', function( $scope ) {
  // we control our app from here
});

变量是我们如何将$scope控制器逻辑粘合到视图上。说到视图，我们必须告诉 AngularJS 在某个地方使用这个控制器。body让我们再次编辑标签：

<body ng-app="myApp" ng-controller="MainCtrl">

繁荣！我们的应用程序有效。所以现在 AngularJS 已经全部设置好并且可以工作了，所以我们可以解决你的问题。

你想让某些东西出现在某个动作上。有一个名为ngShow. 当条件为真时，它将显示其中的任何内容：

<form ng-show="visible">

是什么visible？那是一种表达。在这种情况下，它只是一个变量。定义在哪里？在我们的范围内！

app.controller( 'MainCtrl', function( $scope ) {
  $scope.visible = false;
});

好的，现在它开始为false; true当我们单击一个按钮时，我们如何将其更改为？有一个被调用的指令ngClick也需要一个表达式：

<a class="btn" ng-click="visible = true">Show the Form</a>

在这种情况下，我们的表达式将visible变量更改为true。并立即显示表格！这是一个完整的 Plunker：http ://plnkr.co/edit/Kt4dR2tiTkShVYWCqQle?p=preview

欢迎来到 AngularJS！

以下是您应该了解的一些补充资源：

并加入我们的邮件列表！我们是好人。

于 2013-03-15T21:00:59.290 回答
1

听起来你才刚刚开始测试 Angular。我现在才用了大约一个星期。当你意识到它们是如何工作的时候，事情就变得很酷了。希望有更好/更多的文档。我起草了一个快速的JSFiddle 示例，听起来像是您正在寻找的。让我知道这是否是您正在寻找的东西。应该完全工作。

<div ng-controller="bdayCtrl">
<h3>Birthday Reminders</h3>
<table border="1">
    <tr ng-repeat="bday in bdays">
        <td>{{bday.name}}</td>
        <td>{{bday.date}}</td>
    </tr>
</table>

<a class="btn" ng-click="visible = true">Add new</a><br>

<form class="form-horizontal" ng-show="visible" ng-submit="newDate()">
    <input type="text" ng-model="bdayname" placeholder="Name"><br>
    <input type="text" ng-model="bdaydate" placeholder="Birthdate">
    <button class="btn" type="submit"><i class="icon-plus"></i>Add</button>
</form>
</div>

还有你的脚本：

var app = angular.module('myApp', []);

function bdayCtrl($scope) {
$scope.bdays = [{
        "name": "Jamal",
        "date": "Jan 1, 1980"
}, {
        "name": "Paula",
        "date": "Jan 1, 2000"
}, {
        "name": "Damon",
        "date": "Jun 30, 1800"
}];

$scope.newDate = function () {
    $scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate});
    $scope.bdayname = '';
    $scope.bdaydate = '';
};
}
于 2013-03-15T22:40:44.373 回答
0

您可以在没有先验知识的情况下找到一个简单且更复杂的创建 Angular 应用程序的示例：

格式化一个html元素

和

添加数据编辑工具

它们应该有助于提供简单的熟悉。

于 2014-03-17T19:30:40.017 回答