Динамическое добавление элементов в массив

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

Во-первых, это нг-модель не нг режима

и второй, я добавил нг нажмите на кнопку создать, чтобы подтолкнуть 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; 
});