I add angularjs and angularui to my project but it's appearing correctly. It looks like this http://postimg.org/image/vzq0uki3d/ . I don't understand why. My code is right and I'm pretty sure everything its set up correctly. The example.js file is in the root directory with the index.html file. Heres my code.
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ButtonsCtrl">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
<h4>Checkbox</h4>
<pre>{{checkModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-danger" ng-model="checkModel.left" btn-checkbox>Left</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</button>
</div>
<h4>Radio</h4>
<pre>{{radioModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</button>
</div>
</div>
<script src="angular.min.js"></script>
</body>
</html>
example.js
angular.module('plunker', ['ui.bootstrap']);
var ButtonsCtrl = function ($scope) {
$scope.singleModel = 1;
$scope.radioModel = 'Middle';
$scope.checkModel = {
left: false,
middle: true,
right: false
};
};
I'm not too familiar with AngularUI. However, I don't think you have the ButtonsCtrl defined properly. You don't use it as a vary. I think you need something like this:
angular.module('plunker', ['ui.bootstrap'])
.controller('ButtonsCtrl', [ '$scope', function($scope) {
$scope.singleModel = 1;
$scope.radioModel = 'Middle';
$scope.checkModel = {
left: false,
middle: true,
right: false
};
}]);
See comments about defining ButtonsCtrl in global namespace. Working example : http://cdpn.io/HDegL
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 three buttons:
<button class="btn btn-success">Save</button>
<button class="btn btn-success">Send</button>
<button class="btn btn-success">Close</button>
I want to know how to hide button with conditions?
<button ng-show="ShowSave" class="btn btn-success">Save</button>
<button ng-show="ShowSend" class="btn btn-success">Send</button>
<button ng-show="ShowClose" class="btn btn-success">Close</button>
here ShowSave, ShowSend, ShowClose will be Boolean which will be set in your controller
$scope.ShowSave = true;
If above is true it will display button and in case of false it hide your button.
Now you can check it as condition also like
<button ng-show="ShowSave == true" class="btn btn-success">Save</button>
or if you are assigning some string value like 'display' then it will be like
<button ng-show="ShowSave == 'display' ? true : false" class="btn btn-success">Save</button>
You can use ng-show and ng-hide or even ng-if.Lets see an example on how we can use these directives in your case.For instance we want to show save button & remove send button only after sending something and if user clicks on close button we don't want to display both save and send buttons,then below is the sample code of how they should be used.
In your HTML
<button class="btn btn-success" ng-if="showBtns" ng-show="showSave" ng-click="save()">Save</button>
<button class="btn btn-success" ng-if="showBtns" ng-hide="showSave "ng-click="send()">Send</button>
<button class="btn btn-success" ng-click="close()">Close</button>
In your JS
$scope.showSave = false;
$scope.showBtns = true;
$scope.send= function(){
$scope.showSave = true;
};
$scope.close = function(){
$scope.showBtns =false;
}
Here is article on when to use ng-show/ng-hide and ng-if.Hope this helps you !
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<button type="submit" class="btn btn-primary" ng-disabled="isDisabled" ng-click="save()">Test</button>
<button type="submit" ng-hide="firts" class="btn btn-danger">Firts</button>
<button type="submit" ng-hide="Second" class="btn btn-info">Second</button>
</div>
</body>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
$scope.isDisabled = false;
$scope.Second = true;
$scope.save = function () {
$scope.isDisabled = true;
$scope.firts =true;
$scope.Second = false;
};
});
</script>
</html>
I'm trying to get it so that the #water div will show when the water button is clicked and will not when the energy button is clicked. I am trying to use a controller I have made but so far it has not worked.
HTML
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="css/wisdom.css">
<link rel="stylesheet" href="css/bootstrap.css">s
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="http://jquery-1.12.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body ng-app="WebApp">
<div id="water" ng-include src="'menu.html'"></div>
</br>
</br>
<section ng-controller="StateController">
<div class="btn-group" role="group" ng-model="show" >
<button type="button" class="btn btn-primary" ng-clicked="StateController.setState(1)">Water</button>
<button type="button" class="btn btn-warning" ng-clicked="StateController.setState(2)">Energy</button>
</br>
</br>
<div ng-include src="'panels.html'" ng-show="StateController.isSet(1)"> </div>
</div>
</section>
<script src="app.js"></script>
</body>
JS
var app = angular.module('WebApp', []);
app.controller('StateController', function(){
this.state = 1;
this.setState = function(selectedState){
this.state = selectedState;
};
this.isSet = function(givenState){
return this.state === givenState;
};
});
make the below changes
HTML
<div id="water" ng-show="something" ng-include src="'menu.html'"></div>
<button type="button" class="btn btn-primary" ng-click="setState(1)">Water</button>
<button type="button" class="btn btn-warning" ng-click="setState(2)">Energy</button>
controller.js
var app = angular.module('WebApp', []);
app.controller('StateController', function($scope){
$scope.setState=function(a){
if(a==1)
{
$scope.something=true;
}
else{
$scope.something=false;
}
}
});
if you want to show the water div iniatilly then add this before the setstate function in controller
$scope.something=true;
if u dont want then make it as false
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>
I've just add angularJS to my project and I am now trying to add AngularUI to my project but it's not working correctly. The buttons don't look nice like they are supposed to. My webpage looks like http://postimg.org/image/mzgqlk7mr/
Here's my code:
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link href="menu_source/styles.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div id='cssmenu'>
<!--
<div ng-controller="logOut">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
-->
</div>
<div id="content">
Name:<input type="text" ng-model="name" /> {{name}}
</div>
<div id="content1">
<div ng-controller="ButtonsCtrl">
<h4>Single toggle</h4>
<pre>{{singleModel}}</pre>
<button type cv="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
Single Toggle
</button>
<h4>Checkbox</h4>
<pre>{{checkModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</button>
<button type="button" class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</button>
</div>
<h4>Radio</h4>
<pre>{{radioModel}}</pre>
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</button>
<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</button>
</div>
</div>
<script src="angular.min.js"></script>
</body>
</html>
Here is a simple plunker forked from the AngularUI Bootstrap demo page (http://angular-ui.github.io/bootstrap/): http://plnkr.co/edit/frWpYAfC1TlZ13xNQzSV?p=preview
By comparing this plunker with your code you will notice that:
you are not including angular-ui/bootstrap JavaScript (!)
you need to add dependency on the ui.bootstrap module
On the other hand you are including Bootstrap's JavaScript which is totally unnecessary.