创建的newBookmark未显示(Angularjs)

时间:2016-02-17 06:27:40

标签: javascript html angularjs

<html ng-app="MyApp">
<head>
<title>Angularjs</title>
</head>
<body ng-controller="MyController">


<div ng-repeat="category in categories" >
<a href="#" ng-click="setCurrentCategory(category)" >{{category.name}} </a>
</div>
</br>
</br>

<div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name} ">
<button type="button" class="editing_buttom" ng-click="startEditing();"  > 
Edit
</button>
<h1>{{bookmark.title}}</h1>
</div>
</hr>


<!-- Creating -->
<div ng-if="shouldShowCreating()">
<button type="button" class="abcd1" ng-click="startCreating();"> Create a Bookmark </button> 

<form class="create-form" ng-show="isCreating" ng-submit="createBookmark(newBookmark)">
<div class="form-group">
<label for="newBookmarkTitle">Bookmark Title</label>
<input type="text" ng-model="newBookmark.title" id="newBookmarkTitle" placeholder="Enter Title">
</div>
<button type="submit">Create </button>
<button type="button" ng-click="cancelCreating()">Cancel</button>
</form>
</div>

<!-- Editing-->
<div ng-if="shouldShowEditing()">
Edit a Bookmark.
<button type="button" class="btn btn-cancel" ng-click="cancelEditing();">Cancel</button>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="C:\Users\relhana\Angularjs\app.js"></script>
</body>

</html>

这是我的Angularjs脚本

angular.module("MyApp",[])
.controller("MyController",function($scope){

$scope.categories=[{"id":0, "name":'Akshay'},{"id":1,"name":'Ankush'},{"id":2,"name":'Aditya'}];

$scope.bookmarks=[{"id":0, "title":'Hello Sir', "category":"Ankush"},{"id":1, "title":"Hello Mam", "category":"Aditya"},{"id":2, "title":"ABC Employee", "category":"Akshay"},
{"id":3, "title":"Intern", "category":"Akshay"}];

$scope.currentCategory=null;    

function setCurrentCategory(category){
    $scope.currentCategory=category;
    cancelCreating();
    cancelEditing();
}

$scope.setCurrentCategory=setCurrentCategory;

$scope.isCreating=false;
$scope.isEditing=false;

function resetCreateform(){
    $scope.newBookmark={
        title:'',
        category:$scope.currentCategory
    }
}


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

    resetCreateform();
}

$scope.createBookmark= createBookmark;

function shouldShowCreating(){
    return $scope.currentCategory && !$scope.isEditing;
}

function shouldShowEditing(){
    return $scope.isEditing && !$scope.isCreating;
}

function startCreating(){
    $scope.isCreating=true;
    $scope.isEditing=false;

    resetCreateform();
}

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

function startEditing(){
    $scope.isEditing=true;
    $scope.isCreating=false;
}
function cancelEditing(){
    $scope.isEditing=false;
}

$scope.startCreating= startCreating;
$scope.cancelCreating= cancelCreating;
$scope.startEditing=startEditing;
$scope.cancelEditing=cancelEditing;
$scope.shouldShowCreating=shouldShowCreating;
$scope.shouldShowEditing=shouldShowEditing;

});

问题是:我正在创建一个新书签,提交后,新书签没有显示。请帮忙。我已从表格中取得标题,并且在提交新书标记后不会显示。

0 个答案:

没有答案