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

第二，我添加了一个ng-click到创建按钮，以推送新书签，我删除了重置书签功能

<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;
});

Answer 2

您错过了ng-model ng-mode为元素newBookmarkTitle和newBookmarkURL输入的内容。如果您现在尝试以下代码段，您会注意到它有效。

＆＃13;

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);
          
        		
            resetCreateForm();
        }
    $scope.startCreating= startCreating;
    $scope.cancelCreating=cancelCreating;
    $scope.createBookmark= createBookmark;
});

＆＃13;

<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>

＆＃13;

动态添加元素到数组

2 个答案: