1

ng-submit="newBirthday()これがデータをプッシュする という関数にデータを送信するフォームがあります-$scope.bdayname, $scope.bdaydate;という名前の配列にbdaes

私の問題は、アレイに事前定義されたデータがあることを確認したすべてのチュートリアルで、送信時にデータでいっぱいになる空のアレイになる方法があるかどうかです。

app.js：

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

app.controller('main', function($scope){ 

    // Start as not visible but when button is tapped it will show as true 

        $scope.visible = false;

    // Create the array to hold the list of Birthdays

        $scope.bdays = [{}];

    // Create the function to push the data into the "bdays" array

    $scope.newBirthday = function(){

        $scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate});

        $scope.bdayname = '';
        $scope.bdaydate = '';

    }
});

HTML：

<body ng-app="birthdayToDo" ng-controller="main">
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Birthday Reminders</h1>
        </div>
            <ul ng-repeat="bdays in bdays">
                <li>{{bdae.name}} | {{bdae.date}}</li>
            </ul>

           <form ng-show="visible" ng-submit="newBirthday()">
            <label>Name:</label>
            <input type="text" ng-model="bdayname" placeholder="Name"/>
            <label>Date:</label>
            <input type="date" ng-model="bdaydate" placeholder="Date"/>
            <button class="btn" type="submit">Save</button>
        </form>
      </div>

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

    <div id="footer">
      <div class="container">
        <a class="btn" ng-click="visible = true"><i class="icon-plus"></i>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

1 に答える 1

12

さて、いくつかの小さな問題がありました。

  1. 空の配列にはアイテムがあってはなりません。[{}]空のオブジェクトという1つの項目を持つ配列です。に変更する[]と、余分な弾丸がなくなります。
  2. より大きな問題はあなたのngRepeatでした。使用しng-repeat="bdays in bdays"ました。ngRepeatが行うことは、配列を取得し、配列に対して「for each」を実行して、各値をその一時ローカル変数に割り当てることです。あなたはそれらに同じ名前を付けました。代わりに、ng-repeat="bday in bdays"の各アイテムのDOMノードをその中に追加し、各アイテムを参照するために使用するためにbdays呼び出されるローカル変数を提供bdayします。
  3. ngRepeatテンプレート内で、bdae何も参照しないを使用しました。
  4. 何なのかわからないapp.initialize()ので削除しました。コンソールでエラーが発生しただけです。

修正されたプランカーは次のとおりです： http：//plnkr.co/edit/OFWY7o？p = Preview

于 2013-03-16T18:25:30.423 に答える