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">。これmyAppは、アプリケーションのルートと呼ばれるモジュールを使用するようにAngularJSに指示します。それでは、今それを定義しましょう：

// app.js

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

2番目の引数は、依存関係の配列です。今は気にしません。これでモジュールができました。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。そしてすぐに、フォームが表示されます！完成したプランカーは次のとおりです。http ： //plnkr.co/edit/Kt4dR2tiTkShVYWCqQle？p = Preview

AngularJSへようこそ！

ここにあなたが理解すべきいくつかの補足リソースがあります：

また、メーリングリストに参加してください！私たちはいい人です。

于 2013-03-15T21:00:59.290 に答える
1

Angularのテストを始めたばかりのようですね。私はそれを約1週間しか使用していません。あなたがそれらがどのように機能するかを理解するとき、物事はかなりクールです。しかし、より良い/より多くのドキュメントがあればいいのにと思います。私はあなたが探していたように聞こえる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 に答える