Here is my Angular code:
<div ng-repeat="messages" ng-hide="isAdmin" data-type="{{msg.typetext}}">
</div>
The html output is:
<div ng-repeat="messages" ng-hide="isAdmin" data-type="1">Some Text</div>
<div ng-repeat="messages" ng-hide="isAdmin" data-type="0">Some Text</div>
<div ng-repeat="messages" ng-hide="isAdmin" data-type="1">Some Text</div>
These div s has an attribute called data-type and I am trying to filter these items based on this attribute with two buttons, 1 mean admin and 0 mean others.
Buttons:
<button type="button" ng-click="isAdmin=true">
Admin
</button>
<button type="button" ng-click="isAdmin=false">
Other
</button>
<button type="button" ng-click="isAdmin=false">
All
</button>
What I got so far is, show/hide div. How can I toggle show/hide div based on this attribute?
What I want to achieve is, If click Admin Button, should just show div that has data-type="1" and if click on Other Button, should just show div that hasdata-type="0" and if click on All Button, should show all div.
try this
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="msg in message" ng-show="select == msg.typetext || select == '2'">{{msg.msg}}
</div>
<button type="button" ng-click="select=1">
Admin
</button>
<button type="button" ng-click="select=0">
Other
</button>
<button type="button" ng-click="select=2">
All
</button>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.select = 2;
$scope.message = [
{typetext:1,msg:'admin'},
{typetext:0,msg:'other'}
]
});
</script>
</body>
</html>
#Rahul did it while am typing my answer. Here is my code:
angular.module("test",[]).controller("testc",function($scope) {
$scope.data=[{"typetext": "0","role": "User"},{"typetext": "1","role": "Admin"}]; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
<div ng-repeat="value in data" ng-show="value.typetext==IsAdmin || IsAdmin==undefined">
{{value.typetext}}
</div>
<input type="button" ng-click="IsAdmin=1" value="Admin"/>
<input type="button" ng-click="IsAdmin=0" value="User"/>
<input type="button" ng-click="IsAdmin=undefined" value="All"/>
</div>
Related
I am new to angularJS, also in web development, so here is my problem: I tried to create a book store webpage, where the user utilizes a modal to input data, the problem is when, trying to create a controller for the modal, for the cancel button, it give me the error that you see in the title, that is:
"angular.js:14961 Error: [$injector:unpr]".
I search a lot, but I don't find any solution. I can open the modal.
note: I am not a native English speaker, I tried in the Spanish page, without luck. I hope you can help me.
The code:
my index.html
<!DOCTYPE>
<html >
<head>
<meta charset="UTF-8">
<title>Book Store</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app="app" ng-controller="myController as ctrl">
<h1>Welcome to book store</h1>
<table >
<tr>
<th>Titulo</th>
<th>Autor</th>
<th>Editorial</th>
<th>Edicion</th>
</tr>
<tr ng-repeat="x in listaLibros">
<td>{{x.name}}</td>
<td>{{x.autor}}</td>
<td>{{x.editorial}}</td>
<td>{{x.edition}}</td>
</tr>
</table>
<div class="form-group">
<button type="button" uib-tooltip="Click this button to do something amazing." class="btn btn-primary">Hover to show Tooltip</button>
</div>
<button type="button" class="btn btn-default" ng-click="control.open()">Open me!</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src= "app.js" ></script>
</html>
the agregarLibro.html
<html>
<body></body>
<div class="modal-content">
<div class="modal-header" ng-app="app">
<h4 class="modal-title">Agregar libro</h4>
<div class="modal-body">
<h6>Titulo</h6>
<input type="text" ng-model="listaLibros.name">
<h6>Autor</h6>
<input type="text" ng-model="listaLibros.autor">
<h6>Editorial</h6>
<input type="text" ng-model="listaLibros.editorial">
<h6>Edicion</h6>
<input type="text" ng-model="listaLibros.edition">
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="$ctrl.cancel()">X</button>
<button type="button" class="btn btn-success">Agregar libro</button>
</div>
</body>
</html>
and the app.js
var app = angular.module("app", ['ui.bootstrap']);
app.controller("myController",function($scope, $http, $uibModal,){
var control = this;
$http.get("dataLibros.json")
.then(function(response){
$scope.listaLibros = response.data;
});
control.open = function(){
var modalInstance = $uibModal.open({
templateUrl: "agregarLibro.html",
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
})
}
});
app.controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var $ctrl = this;
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
There are few mistakes,
(i) You need to embed the scripts within the body tag, not oustside the body tag
<div class="form-group">
<button type="button" uib-tooltip="Click this button to do something amazing." class="btn btn-primary">Hover to show Tooltip</button>
</div>
<button type="button" class="btn btn-default" ng-click="control.open()">Open me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</body>
(ii) You should use `ng-click="ctrl.open()"
<button type="button" class="btn btn-default" ng-click="ctrl.open()">Open me!</button>
(iIi)Remove ng-app from your modal, there can be only one ng-app in an application
<div class="modal-header" ng-app="app">
DEMO
I have a next and previous button on footer which is on index.html file. My code structure is as below-
<html ng-app="myapp">
<body ng-controller="myController">
<div id="header">Header</div>
<div id="content"><ng-view></ng-view></div>
<div id="footer">
<button type="button" id="next" ng-click="nextPage()">Next</button>
<button type="button" id="prev" ng-click="prevPage()">Previous</button>
</div>
</body>
</html>
On click of Next and previous button, my page content should redirect to new view in the content. I have used ui-view to redirect to different view.
But in controller part it only redirect to 1.html page. After again when I click it does not redirect to 2.html page
I need to redirect to different page(1.html,2.html,3.html,4.html) on click of each next button.
Please let me know how it can be possible.
There is also an issue with your code. Since you are using ui.router, any interaction with the $stateProvider and $states need to happen using the ui-view directive but you have used ng-view and so your code won't work. Change it as below:
<html ng-app="myapp">
<body ng-controller="myController">
<div id="header">Header</div>
<div id="content">
<ui-view></ui-view>
</div>
<div id="footer">
<button type="button" id="next" ng-click="nextPage()">Next</button>
<button type="button" id="prev" ng-click="prevPage()">Previous</button>
</div>
</body>
</html>
You can do it using angular $location.
<html ng-app="myapp">
<body ng-controller="myController">
<div id="header">Header</div>
<div id="content"><ng-view></ng-view></div>
<div id="footer">
<button type="button" id="next" ng-click="go('/NextPageUrl')">Next</button>
<button type="button" id="prev" ng-click="go('/PrevPageUrl')">Previous</button>
</div>
</body>
</html>
In controller:
$scope.go = function ( path ) {
$location.path( path );
};
I have a Angular Strap popover that contains form elements:
<button type="button" class="btn btn-success" bs-popover title="2nd popover" html="true" data-content="should become a form of some kind">
<span class='glyphicon glyphicon-plus'></span>
</button>
I load that into the first popover
<button type="button" "class="btn btn-default" bs-popover data-auto-close="1" data-html="true" data-content="{{popoverContent}}" data-animation="am-flip-x" title="1st popover">
Button label
</button>
using:
(function() {
"use strict";
angular.module("app").controller("managerController", ["$scope", "imageHierarchyRepository", "$templateCache", "$compile", function ($scope, imageHierarchyRepository, $templateCache, $compile) {
imageHierarchyRepository.query(function(data) {
$scope.hierarchies = data;
});
$scope.popoverContent = $templateCache.get("popoverTemplate.html");
};
}]);
})();
However the second popover doesn't show up, and I'm guessing that it has something to do with compiling the raw html string into the first popover. How do I correctly compile the contents of a popover in AngularJS?
I'm not sure if this will answer your question, but here's an example of how to show a popover within a popover using templates:
<button type="button" class="btn btn-primary" bs-popover data-title="primary popover" html="true" data-template-url="popoverTemplate.html">Primary popover</button>
<script type="text/ng-template" id="popoverTemplate.html">
<div class="popover" tabindex="-1">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content">
<button type="button" class="btn btn-default" bs-popover data-title="inner popover" html="true" data-template-url="popover2Template.html">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</script>
<script type="text/ng-template" id="popover2Template.html">
<div class="popover" tabindex="-1">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<form class="popover-content">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control"/>
</div>
</form>
</div>
</script>
I'm trying to implement a shortlisting functionality in a case where I'm using ng-click inside ng-repeat.
While the $index is being displayed correctly outside the ng-click, $index is only the index of the last object in the JSON array in all the cases where the html is generated using ng-repeat.
I was expecting the respective venue or venue.id to be passed as an argument to shortlistThis(). I'm guessing that this could be an issue related to event binding.
Can someone help me understand what's going wrong here and probably a better way to do this if possible.
I did try checking this Bind ng-model name and ng-click inside ng-repeat in angularjs The fiddle here works just fine but, mine doesn't.
Update: I've found something interesting here. When the shortlist button is placed just under the ng-repeat, it work just as intended. But when, nested inside a div with a ng-class, it isn't working as intended. Can anyone explain and suggest a fix for this ?
//locationsapp.js var locationsApp = angular.module('locationsApp', []);
var venues = [{
id: "Flknm",
name: "ship",
}, {
id: "lelp",
name: "boat",
}, {
id: "myp",
name: "yacht",
}, ];
var shortlistedVenues = [];
var locationsApp = angular.module('locationsApp', ['ui.bootstrap']);
locationsApp.controller("getvenues", function($scope) {
$scope.venues = venues;
$scope.shortlistThis = function(venue) {
console.log(venue);
if (shortlistedVenues.indexOf(venue) == -1) {
shortlistedVenues.push(venue);
//alert('If');
} else {
console.log('already shortlisted')
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="locations" ng-app="locationsApp">
<div ng-controller="getvenues">
<div ng-repeat="venue in venues" ng-mouseover="" class="venue">
<div ng-controller="manageInfo">
<div class="row-fluid">
<div class="control" ng-click="showInfo()">
</div>
<div class="maps" class="info">
<div ng-class="class">
<div class="close-info" ng-click="hideInfo()">
<i class="fa fa-times">
</i>
</div>
<div class="row full-venue-contents" ng-app="ui.bootstrap.demo">
<div class="">
<div class="row-fluid myclass">
<div class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup" ng-click="shortlistThis(venue)">
Shortlist{{$index}}
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of Full Info Container -->
</div>
</div>
</div>
</div>
<div class="compare">
<button type="button" class="btn btn-default btn-lg btn-sup">
Compare ( {{shortlistedVenues.length}} )
</button>
</div>
</div>
</div>
</div>
</div>
The problem is with your button div which was position: fixed, it is actually showing the 1st button but clicking on it firing last button click, I'd suggest you should suggest you render only the shortlist button which has been selected by you. For that you can use ng-if and render those button which index is the same as that of selected $index
HTML
<div ng-if="selected==$index" class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup"
ng-click="shortlistThis($parent.$index)">Shortlist{{$index}}</button>
</div>
</div>
</div>
& then put ng-click="selected='$index'" on ng-repeat div like
<div ng-repeat="venue in venues" class="venue" ng-click="selected=$index">
Working Fiddle
Hope this could help you, Thanks.
In AngularJS, I have multiple buttons that let people filter a page.
What is the conventional way to detect a button click in Angular and set the value of $scope.filter_value to the value of the button?
Should I be attaching ng-click to everything, or is there a better way?
jsfiddle: http://jsfiddle.net/9u1aqq24/
HTML
<main ng-app="myApp">
<section ng-controller="myController">
<h4>Filter by Role</h4>
<div class="btn-group" ng-click="???">
<button type="button" class="btn btn-default" data-role="frontend developer" ng-click="console.log('CLICKED');">
Frontend
</button>
<button type="button" class="btn btn-default" data-role="backend developer">
Backend
</button>
<button type="button" class="btn btn-default" data-role="full stack developer">
Full Stack
</button>
</div>
<h4>Filter value</h4>
<p>{{filter}}</p>
</section>
</main>
JS
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function($scope){
$scope.filter = null;
}]);
ng-click is a natural way of handling clicks in Angular. However, for your problem you might consider radio- or checkbox- buttons. You can find such components for example in Angular-Bootstrap.
Use just ng-click="somefunction(parametr)"
and after that in your controller
$scope.somefunction = function(parametr)
{
....
}
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
$scope.setFilter = function(type) {
// you can put all your logic here ($http.get.. or whatever)
$scope.filter = type;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<h4>Filter by Role</h4>
<div class="btn-group" ng-click="???">
<button type="button" class="btn btn-default" data-role="frontend developer" ng-click="setFilter('frontend developer')">Frontend</button>
<button type="button" class="btn btn-default" data-role="backend developer" ng-click="setFilter('backend developer')">Backend</button>
<button type="button" class="btn btn-default" data-role="full stack developer" ng-click="setFilter('full stack developer')">Full Stack</button>
</div>
<h4>Filter value</h4>
<p>{{filter}}</p>
</div>
</body>
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope) {
$scope.setFilter = function(type) {
// you can put all your logic here ($http.get.. or whatever)
$scope.filter = type;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<h4>Filter by Role</h4>
<div class="btn-group" ng-click="???">
<button type="button" class="btn btn-default" data-role="frontend developer" ng-click="setFilter('frontend developer')">Frontend</button>
<button type="button" class="btn btn-default" data-role="backend developer" ng-click="setFilter('backend developer')">Backend</button>
<button type="button" class="btn btn-default" data-role="full stack developer" ng-click="setFilter('full stack developer')">Full Stack</button>
</div>
<h4>Filter value</h4>
<p>{{filter}}</p>
</div>
</body>