html - Angular JS - 有一个空数组

标签 html angularjs

我有一个表单将数据提交到一个名为 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>

最佳答案

好的,有一些小问题。

  1. 一个空数组必须没有任何项目; [{}] 是一个包含一项的数组:一个空对象。更改为 [] 可以去掉多余的项目符号。
  2. 更大的问题是您的 ngRepeat。您使用了 ng-repeat="bdays in bdays"。 ngRepeat 所做的是获取一个数组并允许您对数组执行“for each”操作,将每个值分配给该临时局部变量。你把它们命名为相同的。相反,ng-repeat="bday in bdays" 将为 bdays 中的每个项目添加其中的 DOM 节点,为您提供一个名为 bday 用于引用每个项目。
  3. 在 ngRepeat 模板中,您使用了 bdae,它没有引用任何内容。
  4. 我不知道 app.initialize() 是什么,所以我删除了它。它只是在控制台中出错。

这是一个固定的 Plunker:http://plnkr.co/edit/OFWY7o?p=preview

关于html - Angular JS - 有一个空数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15444178/

相关文章:

html - 水平对齐内联 block

html - 如何在多行上均匀划分 UL

javascript - AngularJS 轮播不工作

angularjs - Angular 嵌套重复,保存到数据库不起作用

javascript - 将 css 样式应用于页码

javascript - 将 jQuery 数据附加为字符串时在 div 上设置它

javascript - 缓存 list 更新因 'ondownloading' 事件而挂起

jquery - 在 JQuery/Angular JS 中通过拖放创建嵌套条件

javascript - 在 AngularJS 指令中获取元素父高度

javascript - 如何使用 AngularJS/Ionic 作为 Backbone/Cordova 项目的一部分?