將元素動態添加到數組

Question

我當時正在使用一個簡單的角度教程，該教程基本上顯示了瀏覽器中硬編碼數組的元素列表，並創建了一個向該數組添加更多元素並添加新創建元素的表單直接在瀏覽器上。
寫我的代碼後，我試圖將新元素添加到數組，但只執行增加了新的元素<li>沒有它的標題

在這裏看到我的代碼上的jsfiddle
https://jsfiddle.net/SaifHarbia/ht4jme7q/1/
代碼還貼出下面

我的HTML

<div ng-app="bookmark" ng-controller="BookCtrl"> 
    <ul> 
    <li ng-repeat="bookmark in bookmarks"> 
     <a href="#" ng-click="setCurrentCategory(bookmark)"> 
    {{bookmark.title}} </a> 
    </li> 

    </ul> 
    <button type="button" ng-click="startCreating();" class="btn btn-link"> 
     <span class="glyphicon glipbicon-plus"></span> 
     Create Bookmark 
    </button> 
    <br><hr/> 
    <form class="create-form" ng-show="isCreating" role="form" 
    ng-submit="createBookmark(newBookmark)" novalidate> 
     <div class="form-group"> 
      <label for="newBookmarkTitle">Bookmark Title</label> 
      <input type="text" class="form-control" id="newBookmarkTitle" 
     ng-mode="newBookmark.title" placeholder="Enter title"> 
     </div> 
     <div class="form-group"> 
      <label for="newBookmarkURL">Bookmark URL</label> 
      <input type="text" class="form-control" id="newBookmarkURL" 
    ng-mode="newBookmark.url" placeholder="Enter URL"> 
     </div> 

     <button type="submit" class="btn btn-info btn-lg">Create</button> 
     <button type="button" class="btn btn-default btn-lg pull-right" 
    ng-click="cancelCreating()">Cancel</button> 
    </form> 
     </div> 

我的javascript：

var app=angular.module("bookmark", []); 

app.controller("BookCtrl", function($scope){ 

    $scope.bookmarks=[ 
     {title: "Type1", url: "http://www.somewebsite.com/"}, 
     {title: "Type2", url: "http://www.website.com/"} 
    ] 
    function resetCreateForm(){ 
     $scope.newBookmark={ 
      title : '', 
      url:''  
     } 
    } 
    $scope.isCreating= false; 
    function startCreating(){ 
     $scope.isCreating=true; 

     resetCreateForm(); 
    } 

    function cancelCreating(){ 
     $scope.isCreating = false; 
    } 

    function createBookmark(bookmark){ 

      $scope.bookmarks.push(bookmark); 


      resetCreateForm(); 
     } 
    $scope.startCreating= startCreating; 
    $scope.cancelCreating=cancelCreating; 
    $scope.createBookmark= createBookmark; 
}); 

Answer 1

你錯過鍵入ng-model爲ng-mode的元素newBookmarkTitle和newBookmarkURL。如果你現在嘗試下面的代碼片段，你會注意到這一點。

var app=angular.module("bookmark", []); 
 

 
app.controller("BookCtrl", function($scope){ 
 

 
    $scope.bookmarks=[ 
 
     {title: "Type1", url: "http://www.hihi2.com/"}, 
 
     {title: "Type2", url: "http://www.hihi2.com/"} 
 
    ] 
 
\t function resetCreateForm(){ 
 
     $scope.newBookmark={ 
 
      title : '', 
 
      url:''  
 
     } 
 
    } 
 
    $scope.isCreating= false; 
 
    function startCreating(){ 
 
     $scope.isCreating=true; 
 
    \t \t 
 
     resetCreateForm(); 
 
    } 
 
    
 
    function cancelCreating(){ 
 
     $scope.isCreating = false; 
 
    } 
 
    
 
    function createBookmark(bookmark){ 
 
      // bookmark.id=$scope.bookmarks.length; 
 
      $scope.bookmarks.push(bookmark); 
 
      
 
     \t \t 
 
      resetCreateForm(); 
 
     } 
 
    $scope.startCreating= startCreating; 
 
    $scope.cancelCreating=cancelCreating; 
 
    $scope.createBookmark= createBookmark; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="bookmark" ng-controller="BookCtrl"> 
 
    <ul> 
 
    <li ng-repeat="bookmark in bookmarks"> 
 
     <a href="#" ng-click="setCurrentCategory(bookmark)">{{bookmark.title}}</a> 
 
    </li> 
 

 
</ul> 
 
<button type="button" ng-click="startCreating();" class="btn btn-link"> 
 
     <span class="glyphicon glipbicon-plus"></span> 
 
     Create Bookmark 
 
    </button> 
 
    <br><hr/> 
 
    <form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate> 
 
     <div class="form-group"> 
 
      <label for="newBookmarkTitle">Bookmark Title</label> 
 
      <!-- Here was the first problem--> 
 
      <input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="newBookmarkURL">Bookmark URL</label> 
 
      <!-- Here was the second problem--> 
 
      <input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL"> 
 
     </div> 
 

 
     <button type="submit" class="btn btn-info btn-lg">Create</button> 
 
     <button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button> 
 
    </form> 
 
     </div>

Answer 2

首先，它不是NG-模式NG-模型

和第二，我添加了一個NG-點擊創建按鈕，推newbookmark，和我刪除了復位書籤功能

<div ng-app="bookmark" ng-controller="BookCtrl"> 
    <ul> 
    <li ng-repeat="bookmark in bookmarks"> 
     <a href="#" ng-click="setCurrentCategory(bookmark)">{{bookmark.title}}</a> 
    </li> 

</ul> 
<button type="button" ng-click="startCreating();" class="btn btn-link"> 
     <span class="glyphicon glipbicon-plus"></span> 
     Create Bookmark 
    </button> 
    <br><hr/> 
    <form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate> 
     <div class="form-group"> 
      <label for="newBookmarkTitle">Bookmark Title</label> 
      <input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title"> 
     </div> 
     <div class="form-group"> 
      <label for="newBookmarkURL">Bookmark URL</label> 
      <input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL"> 
     </div> 

     <button type="submit" ng-click="createBookmark(newBookmark)" class="btn btn-info btn-lg">Create</button> 
     <button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button> 
    </form> 
     </div> 

和JavaScript ..

var app=angular.module("bookmark", []); 

app.controller("BookCtrl", function($scope){ 

    $scope.bookmarks=[ 
     {title: "Type1", url: "http://www.hihi2.com/"}, 
     {title: "Type2", url: "http://www.hihi2.com/"} 
    ] 
    function resetCreateForm(){ 
     $scope.newBookmark={ 
      title : '', 
      url:''  
     } 
    } 
    $scope.isCreating= false; 
    function startCreating(){ 
     $scope.isCreating=true; 

     resetCreateForm(); 
    } 

    function cancelCreating(){ 
     $scope.isCreating = false; 
    } 

    function createBookmark(bookmark){ 
      // bookmark.id=$scope.bookmarks.length; 
      $scope.bookmarks.push(bookmark); 

     } 
    $scope.startCreating= startCreating; 
    $scope.cancelCreating=cancelCreating; 
    $scope.createBookmark= createBookmark; 
});