My button is located in two partial templates exactly the same way. However it's not working in the home template.
I want to make the function deleteNote() work. When I am at a specific note's url the button works, but when I am at the home template it just won't. Does anybody have a clue why?
note.html
<div class="col-lg-3" ng-controller="mainCtrl">
<div class="list-group" ng-repeat="note in notes">
<a href="#note/{{note.id}}" class="list-group-item" style="max-height: 90px; overflow: hidden">
{{note.title}}
<p style="text-align: justify;" ><small>{{note.body}}</small></p>
</a>
<button ng-click="deleteNote(note)" class="btn btn-default btn-xs" style="float: right;">Delete</button>
</div>
</div>
home.html exactly the same as you can see
<div class="col-lg-3" ng-controller="mainCtrl">
<div class="list-group" ng-repeat="note in notes">
<a href="#note/{{note.id}}" class="list-group-item" style="max-height: 90px; overflow: hidden">
{{note.title}}
<p style="text-align: justify;" ><small>{{note.body}}</small></p>
</a>
<button ng-click="deleteNote(note)" class="btn btn-default btn-xs" style="float: right;">Delete</button>
</div>
</div>
notesCtrl.js
angular.module('theNotesApp')
.controller('notesCtrl', [
'$scope',
'notesFactory',
'note',
'$stateParams',
'$state', function($scope, notesService, note, $stateParams, $state) {
$scope.note = note;
$scope.title = note.title;
$scope.body = note.body;
$scope.updateNote = function() {
notesService.update($stateParams.id, {title: $scope.title, body: $scope.body});
notesService.getAll();
};
$scope.deleteNote = function(note) {
notesService.delete(note.id);
$state.go('home');
notesService.getAll();
};
}])
mainCtrl.js
.controller('mainCtrl',['$scope', 'notesFactory', function($scope, notesService){
$scope.notes = notesService.notesObjectInService;
notesService.getAll();
$scope.addNote = function(){
if ($scope.title === "" ) {
return;
}
notesService.create({
title: $scope.title,
body:$scope.body
});
$scope.title= '';
$scope.body= '';
};
}])
deleteNote is defined on scope of notesCtrl not on mainCtrl. You will need to create a method deleteNote on mainCtrl. Here is a demo.
Related
My problem probably is simple. I want hide my intro section on all pages less at home.
The problem is that when you hide hiding on every page and when you show shows on every page. I plan to just hide in the home page "/".
html:
<!-- Intro Section -->
<section id="intro" class="intro-section" ng-show="home">
<div class="container">
<div class="row">
<a class="btn btn-default page-scroll scroll_btn floating" href="#slide">
<span class="glyphicon glyphicon-arrow-down"></span>
</a>
</div>
</div>
</section>
JS:
app.controller("employerCtrl", ["$scope", "$location", "$route", function($scope, $location, $route) {
var path = $location.path();
console.log(path);
$scope.home = true;
if(path === "/") {
console.log("Inside");
$scope.home = true;
} else {
console.log("Inside else");
$scope.home = false;
}
}]);
Take home as root scope and make it false in home controller and true in other controllers.
app.controller("homecontroller", ["$scope", "$location", "$route","$rootScope", function($scope, $location, $route,$rootScope) {
$rootScope.home = false;
}]);
app.controller("othercontroller", ["$scope", "$location", "$route","$rootScope", function($scope, $location, $route,$rootScope) {
$rootScope.home = true;
}]);
<section id="intro" class="intro-section" ng-show="home">
<div class="container">
<div class="row">
<a class="btn btn-default page-scroll scroll_btn floating" href="#slide">
<span class="glyphicon glyphicon-arrow-down"></span>
</a>
</div>
</div>
</section>
Trying to delete a list with an ng-click but the html and controller do not appear to communicate.
<div class="list-group">
<span ng-repeat="list in vm.lists"
class="list-group-item">
<a class="btn btn-primary pull-right" ng-click="vm.elim(list)">
<i class="glyphicon glyphicon-trash"></i>
</a>
<a class="btn btn-primary pull-right" ui-sref=
"lists.view({ listId:list._id })">
<i class="glyphicon glyphicon-edit"></i>
</a>
<h4 class="list-group-item-heading" ng-bind="list.name"></h4>
</span>
</div>
function elim(list) {
alert("works");
if ($window.confirm('Are you sure you want to delete?')) {
vm.list.$remove($state.go('lists.list'));
}
}
There should at least be an alert when the icon is clicked, but nothing happens. Suggestions?
Like Esteban said,Your elem function should be a part of scope variable like
$scope.vm.elem = function(){};
It looks like your function is not inside the $scope variable. Using
$scope.vm.elim = function(list){
...
}
should be enough.
Does your controller has below lines of code?
var vm = this;
vm.elm = function (list) {
alert("works");
if ($window.confirm('Are you sure you want to delete?')) {
vm.list.$remove($state.go('lists.list'));
}
};
If possible show us your controller code.
Here is a working example with ng-click:
<html >
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="obj in objs">
{{obj.name}}
<button ng-click="click(obj.id)">Delete</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function($scope){
$scope.objs = [{id: 1, name:"Darin"},{id: 2, name:"Jake"},{id: 3, name:"Todd"}]
$scope.click = function(id){
alert(id);
}
});
</script>
</html>
If you using controller as syntax in directive or in html.
e.g. <div ng-controller="YourController as ctrl">
<!--some html code-->
</div>
Or
angular.directive('test',function test() {
return {
restrict: 'E',
template: '<button ng-click="click">{{text}}</button>',
controller: YourController,
controllerAs: 'ctrl'
}
});
then in html view you can access controller properties as
<div ng-controller="YourController as ctrl">
<p>{{ctrl.someProperty}}</p>
</div>`
If you are not using controller as syntax then just remove vm from "vm.elim(list)" and "vm.lists"
Here is the great article for the same : https://toddmotto.com/digging-into-angulars-controller-as-syntax/
Assuming you want to keep the vm pattern just add on the controller,
vm.elim = elim;
At least should alert now.
This is a small project just for learning purposes.
The objective is that when I click in the + button in front of the name of the game, the AngularJS material popup show up. Its working, but I want it to work for the different games. With a different HTML template correspondent to the game I click.
Here is my project.
https://github.com/hseleiro/myApp
index.html
<div ng-view>
</div>
assets/js/mainApp.js
var stuffApp = angular.module('myApp', ['ngAnimate','ngRoute','ngMaterial','ui.bootstrap.tpls','ui.bootstrap']);
stuffApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/',
{
templateUrl: 'pages/home.html',
controller: 'mainController',
})
.when('/games',
{
templateUrl: 'pages/games.html',
controller: 'mainController'
})
})
stuffApp.controller('mainController', function ($scope,$mdDialog){
$scope.query = {}
$scope.queryBy = '$'
$scope.games = [
{
"name" : "BloodBorne",
"consola" : "Playstation 4"
},
{
"name" : "Mass Efect 3",
"consola" : "Xbox 360"
},
{
"name" : "Pro Evolution Soccer 6",
"consola" : "Xbox 360"
}
];
$scope.showAdvanced = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'pages/dialog1.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
})
};
function DialogController($scope, $mdDialog) {
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
});
pages/games.html
<div class="container">
<div class="row">
<div class="titulo">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<h1><i class="fa fa-gamepad fa-4x"></i></h1>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<div class="row">
<div class="col-sm-1">
<div class="search_icon">
<h4><i class="fa fa-search fa-4x"></i></h4>
</div>
</div>
<div class="col-sm-11">
<div class="search_bar">
<div><input class="form-control" ng-model="query[queryBy]" /></div>
</div>
</div>
</div>
<hr>
<div>
<table class="table">
<tr>
<th>Nome</th>
<th>Consola</th>
</tr>
<tr ng-repeat="game in games | filter:query">
<td>{{game.name}}<md-button class="md-primary" ng-click="showAdvanced($event)">
<i class="fa fa-plus"></i>
</md-button></td>
<td>{{game.consola}}</td>
</tr>
</table>
</div>
</div>
pages/dialog1.tmpl.html
<md-dialog aria-label="">
<form>
<md-dialog-content class="sticky-container">
<md-subheader class="md-sticky-no-effect"></md-subheader>
<div>
<p>
Test
</p>
<img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="assets/img/bloodborne.jpg">
<p>
Test
</p>
<p>
Test
</p>
</div>
</md-dialog-content>
<div class="md-actions" layout="row">
<span flex></span>
<md-button ng-click="answer('useful')" class="md-primary">
Close
</md-button>
</div>
</form>
</md-dialog>
Could some one help me ? Thanks
Sounds like you need to parameterize the controller and template you pass to $mdDialog.
For example:
$scope.showAdvanced = function(ev, popupIdentifier) {
$mdDialog.show({
controller: popupIdentifier + 'Controller',
templateUrl: 'pages/' + popupIdentifier + '.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
})
};
and then simply call the function with whatever popup content you need:
$scope.showAdvanced($event, 'Game1');
I have a directive that displays cards for the user. Each card has an 'aww' or 'naww' button. AngularJS goes through the ng-repeat and generates each card. When the user clicks that button I want the 'aww' or 'naww' value to increment for that particular card. Unfortunately, when I click the buttons now, nothing happens and the values remain at zero. How would I get the aww and naww values to increment for each individual card?
view1.html
<div class="container">
<div ng-repeat="animal in animals" my-animal="animal"></div>
</div>
view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope',function($scope) {
$scope.animals = [{'name':'Perry','animal':'Bird','awws':0,'nawws':0,
'image-url': 'https://goo.gl/Vtcvk5'},
{'name':'Max','animal':'Cat','awws':0,'nawws':0,
'image-url':'https://goo.gl/bqOQci'
},
{'name': 'Julian','animal':'Duck','awws':0,'nawws':0,
'image-url':'https://goo.gl/v9GyTz'
}];
$scope.add = function(item){
item = item + 1;
};
}])
.directive('myAnimal', function() {
return {
scope: {
item: '=myAnimal'
},
restrict: 'EA',
templateUrl: 'view1/card-template.html'
};
});
cardtemplate.html
<div class="card">
<img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
<div class="card-block">
<h4 class="card-title">{{item.name}}</h4>
<p class="card-text">{{item.animal}}</p>
<button type="button" ng-click="add(item.awws)" class="btn btn-success">Aww +1 </button>
{{item.awws}}
<button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
{{item.nawws}}
</div>
</div>
This is happening because '$scope.add' function of your controller isn't inside the scope of your myAnimal directive(which has an isolate scope).
Also, you are using the directive in a wrong way. my-animal is your directive and not an attribute for your directive. First, change your directive calling template to:
<div class="container">
<div ng-repeat="animal in animals" my-animal animal="animal" add="add"></div>
</div>
directive to:
.directive('myAnimal', function() {
return {
scope: {
item: '=animal',
add: '&' //method binding here
},
restrict: 'EA',
templateUrl: 'view1/card-template.html'
};
});
As you can see I have added another attribute which binds the 'add' function in your controller to the directive, thus making it available in the directive scope. & is used for achieving this.
Issue is you are passing literal value of aww in ng-click function, where as you should pass the item object and increment its item.awws property.
<div class="card">
<img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
<div class="card-block">
<h4 class="card-title">{{item.name}}</h4>
<p class="card-text">{{item.animal}}</p>
<button type="button" ng-click="add(item)" class="btn btn-success">Aww +1 </button>
{{item.awws}}
<button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
{{item.nawws}}
</div>
</div>
and in js...
$scope.add = function(item){
item.awws += 1;//it might be required to find the item in the collection and then increment it
};
}])
Or, the easiest would be to do it directly in HTML
<div class="card">
<img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
<div class="card-block">
<h4 class="card-title">{{item.name}}</h4>
<p class="card-text">{{item.animal}}</p>
<button type="button" ng-click="item.awws = item.awws + 1" class="btn btn-success">Aww +1 </button>
{{item.awws}}
<button type="button" ng-click="item.nawws = item.nawws - 1" class="btn btn-danger">Naww -1 </button>
{{item.nawws}}
</div>
</div>
My code is like this
angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', [ '$scope', '$modal',
function($scope, $modal) {
var data = [];
data.push("first message");
this.openReprintModal = function() {
var modalInstance = $modal.open({
templateUrl: 'ReprintModal.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function() {
return data;
}
}
});
};
this.openReprintModal();
}
]);
angular.module('RateRequestApp.controllers').controller('ModalInstanceCtrl', function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
<div id="RateRequestApp" class="content" ng-app='RateRequestApp' ng-controller="ReadOnlyController">
<script type="text/ng-template" id="ReprintModal.html">
<div class="modal-header">
<h3 class="modal-title">Check this out</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<span>{{ item }}</span>
</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
All works Okay Except there is no message shown at the body of modal. Apparently everyhting works except `
<li ng-repeat="item in items">
<span>{{ item }}</span>
</li>`
This part is not working.Can any one point out any possible reason.
Note: I am using this one for model :http://angular-ui.github.io/bootstrap/
You have to inject items object to your ModalInstanceCtrl like this:
angular.module('RateRequestApp.controllers')
.controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {
$scope.items = items;
...
});
And then you are able to access it in your view just like you have it now
<li ng-repeat="item in items">
<span>{{ item }}</span>
</li>