我正在尝试添加新标题和网址。我创建了一个新函数(createBookmark)。它工作正常,它在一个页面中的console.log中显示日期,但它没有添加新属性和URL。它是空白的。
var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function($scope){
$scope.lists = [
{'id' : 0, 'name' : 'Manu'},
{'id' : 1, 'name' : 'Rajveer'},
{'id' : 2, 'name' : 'Heament'},
{'id' : 3, 'name' : 'Yogesh'},
{'id' : 5, 'name' : 'Sajid'},
];
$scope.languages = [
{'id' : 0, 'title' : 'Angular', 'url' : 'http://angularjs.org', "category": "Manu"},
{'id' : 1, 'title' : 'Html5', 'url' : 'http://www.html5rocks.com/en/', "category": "Manu"},
{'id' : 2, 'title' : 'BootStrap', 'url' : 'http://getbootstrap.com/', "category": "Rajveer"},
{'id' : 3, 'title' : 'Css', 'url' : 'http://www.tutorialspoint.com/css/', "category": "Yogesh"},
{'id' : 4, 'title' : 'emberjs', 'url' : 'http://emberjs.com/', "category": "Heament"},
{'id' : 5, 'title' : 'Javascript', 'url' : 'https://www.javascript.com/', "category": "Rajveer"},
{'id' : 6, 'title' : 'jQuery', 'url' : 'https://jquery.com/', "category": "Yogesh"},
{'id' : 7, 'title' : 'Photoshop', 'url' : 'http://www.photoshop.com/', "category": "Sajid"},
{'id' : 8, 'title' : 'Coral Draw', 'url' : 'http://www.coreldraw.com/in/', "category": "Heament"},
{'id' : 9, 'title' : 'Flash', 'url' : 'https://get.adobe.com/flashplayer/', "category": "Sajid"},
];
$scope.currentCategory = null;
function setCurrentCategory(category){
$scope.currentCategory = category;
cancelCreating();
cancelediting();
}
function isCurrentCategory(category){
return $scope.currentCategory !== null && category.name === $scope.currentCategory.name;
}
$scope.isCurrentCategory = isCurrentCategory
$scope.setCurrentCategory = setCurrentCategory;
// -------------- Add new bookmark--------------
function resetCreateForm(){
$scope.newBookmark = {
title : '',
url :'',
category : $scope.currentCategory,
}
}
function createBookmark(language){
language.id = $scope.languages.length;
$scope.languages.push(language);
//console.log(language);
resetCreateForm();
//console.log(resetCreateForm());
}
$scope.createBookmark = createBookmark;
// -------------- Add new bookmark--------------
// Edit bookmar create a toggle start
$scope.isCreating = false;
$scope.isEditing = false;
function startCreating(){
$scope.isCreating = true;
$scope.isEditing = false;
resetCreateForm();
}
function cancelCreating(){
$scope.isCreating = false;
}
function startEditing(){
$scope.isCreating = false;
$scope.isEditing = true;
}
function cancelediting(){
$scope.isEditing = false;
}
function shouldShowCreating(){
return $scope.currentCategory && !$scope.isEditing;
}
function shouldShowEditing(){
return $scope.isEditing && !$scope.isCreating;
}
$scope.startCreating = startCreating;
$scope.cancelCreating = cancelCreating;
$scope.startEditing = startEditing;
$scope.cancelediting = cancelediting;
$scope.shouldShowCreating = shouldShowCreating;
$scope.shouldShowEditing = shouldShowEditing;
// toggle start
});
.left_box{background-color: #909090; padding: 0px;}
.right_box{padding-top: 25px;}
.nav__box{
padding-top: 25px;
}
.nav__box ul{ padding: 0px; margin: 0px; }
.nav__box ul li {list-style: none; padding: 10px; text-align: center;}
.nav__box ul li a{
font-size: 16px;
color: black;
text-decoration: none;
}
.nav__box ul li a:hover{background: }
.language_list { padding: 0px; margin: 0px; }
.language_list li{list-style: none; padding: 5px 10px; margin-bottom: 2px; border: solid 1px #ededed}
.language_list li a {text-decoration: none; padding-left: 15px}
.remove{float: right; font-size: 12px; color: red; line-height: 16px;}
.edit{font-size: 12px; color: red; line-height: 16px; }
.active{background-color: #ffffff}
.create_bookmark{padding-top: 25px}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" class="container-fluid" ng-controller="myCtrl">
<div class="row">
<article class="col-md-1 left_box">
<a href="" ng-click="setCurrentCategory(null)"><img src="images/logo.png" alt="AngularJs"/></a>
<nav class="nav__box">
<ul>
<li ng-repeat='list in lists' ng-class="{'active':isCurrentCategory(list)}">
<a href="#" ng-click="setCurrentCategory(list)">{{list.name}}</a>
</li>
</ul>
</nav>
</article>
<article class="col-md-11 right_box">
<ul class="language_list">
<li ng-repeat= "language in languages | filter:{category:currentCategory.name}">
<span ng-click="startEditing()">Edit</span>
<a href='{{language.url}}' target="_blank">{{language.title}}</a>
<span class="remove">Close</span>
</li>
</ul>
<div class="create_bookmark" ng-if="shouldShowCreating()">
<button type="button" ng-click="startCreating()"> Create Bookmark</button>
<form role="form" ng-show="isCreating" ng-submit="createBookmark(newBookmark)">
<div class="form-group">
<label for="newBookmarkTitle">Bookmark Title</label>
<input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title">
</div>
<div class="form-group">
<label for="newBookmarkURL">Bookmark URl</label>
<input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url">
</div>
<button type="submit" class="btn btn-default">Create</button>
<button type="button" class="btn btn-default" ng-click="cancelCreating()">cancel</button>
</form>
</div>
<div ng-if="shouldShowEditing()">create a bookmark
<button type="button" ng-click="cancelediting()">cancel</button>
</div>
</article>
</div>
</div>