I have the following code in Plunkr. http://plnkr.co/edit/8sBafktFzFa8fCLLJgMF
this is my js file
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalDemoCtrl',
size: size
});
var applicantID = 12;
};
$scope.submit_info = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent1.html',
controller: 'ModalDemoCtrl',
size: size
});
};
});
this is my html page
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<h3>I'm a modal!</h3>
<button class="btn btn-default" ng-click="submit_info('lg')">Submit</button>
</script>
<script type="text/ng-template" id="myModalContent1.html">
<h3>CaseID: </h3>
{{ applicantID }}
</script>
<button class="btn btn-default" ng-click="open()">Set caseID</button>
</div>
</body>
</html>
I want to be able to assign applicantID upon clicking the button "setID" and upon clicking button "submit",it displays the applicantID value that was passed which is '12'. But it keeps passing an empty data.
You need the ng-app, and to remove this $modal, I fixed your fiddle:
http://jsfiddle.net/u0nhwa4w/2/
angular.module('loanstreetIpadAppApp',[])
.controller('Mortgage_LoanCtrl', function ($location, $scope, $http, $sce) {
var applicantID;
$scope.submit_info = function() {
applicantID = 12;
getusercaseID(applicantID);
};
var getusercaseID = function(id) {
$scope.page_data = id;
console.log("yes come on ");
console.log($scope.page_data);
};
});
Related
I'm practicing routing in angularJS and facing a problem. I looked online and tried many ways but that doesn't solve my problem. Can you help me?
I'm having problem with the $state.go function. It changes the url, but the html file is not loaded. I looked at the console but no error appears
app.js
(function(){
var app = angular.module('myTrello',
['date-directives', 'ngRoute', 'ui.router']);
app.controller("mainCtrl", ['$scope', '$http', '$state', '$route', function($scope, $http, $state, $route){
$scope.title = "Welcome to my trello";
$http.get("http://quotes.rest/qod.json")
.then(function(response) {
let quoteInfo = response.data.contents.quotes[0];
$scope.quote = quoteInfo.quote;
$scope.author = quoteInfo.author;
});
$scope.go = function(path) {
$state.go(path, {});
};
}]);
app.controller("boardCtrl", function(){
});
// app.controller("routeCtrl", function($scope, $routeParams) {
// $scope.param = $routeParams.param;
// });
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.state('boards', {
url: '/boards',
templateUrl: 'boards/board.html',
controller: 'boardCtrl'
})
// .state('/boards/:param', {
// url: '/boards/:param',
// templateUrl: 'index.html',
// //controller: 'boardCtrl'
// })
}]);
})();
index.html (important parts)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="bower-angular-route/angular-route.js"></script>
<script src="https://unpkg.com/angular-ui-router#1.0.3/release/angular-ui-router.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="date.js"></script>
<body ng-controller="mainCtrl">
<div class="container">
<div class="jumbotron">
<div class="title">
<h2 class="text-center">{{title}}</h2>
</div>
</div>
<div class="bg-1 text-white text-center">
<h3>Today's quote</h3>
<h4>{{quote}}</h4>
<h5>By: {{author}}</h5>
</div>
</div>
<button class="btn btn-info btn-lg boards" ng-click="go('boards')">My boards</button>
<div ng-view></div>
</body>
board.html
<html>
<h1>Boards</h1>
</html>
As you are using ui-router, You need to use ui-view directive instead of ng-view, so change the code as
<div ui-view></div>
instead of
<div ng-view></div>
I wrote the program that is having 3 buttons and if i click on the particular button it should redirect to corresponding page mentioned in app.js
my requirement is each button should have a controller and it should redirect properly and it should show a console message that which button is clicked
i'm sharing my code but it is not working
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js"></script>
<script>var myItemsApp = angular.module('myItemsApp', ['ngRoute']);</script>
</head>
<body ng-app="myItemsApp">
<div>
<h3>Test</h3>
<div class="row">
<div class="col-md-4">
<button href="/test1" ng-click="submit1()">Button1</button>
<button href="/test2" ng-click="submit2()">Button2</button>
<button href="/test3" ng-click="submit3()">Button3</button>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
<script src="testcntrl.js"></script>
</html>
#app.js
myItemsApp.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/test1', {
templateUrl : 'test.html',
controller : 'button1Controller'
})
.when('/test2', {
templateUrl : 'test1.html',
controller : 'button2Controller'
})
.when('/test3', {
templateUrl : 'test2.html',
controller : 'button3Controller'
})
.otherwise({
redirectTo: '/'
});
}]);
testcntrl.js
myItemsApp.controller('button1Controller', ['$scope','$location', function($scope,location){
$scope.submit1 = function() {
console.log("I clicked on submit button1Controller");
location.path('/test1');
}
}]);
myItemsApp.controller('button2Controller', ['$scope','$location', function($scope,location){
$scope.submit2 = function() {
console.log("I clicked on submit button2Controller ");
location.path('/test2');
}
}]);
myItemsApp.controller('button3Controller', ['$scope','$location', function($scope,location){
$scope.submit3 = function() {
console.log("I clicked on submit button3Controller");
location.path('/test3');
}
}]);
test1.html
<h1>hello</h1>
You should add ng-view to render template. and add # to url in the href.
also you don't need ng-click when time using <a> tag.and you injected service into controller incorrectly. you should inject $location instead of location
if you want to remove # from url so enable html mode.
<div class="col-md-4">
<a href="#/test1" >Button1</a>
<a href="#/test2" >Button2</a>
<a href="#/test3" >Button3</a>
</div>
<div ng-view=""></div>
</div>
Demo
Your idea is ok, it should work but:
No need href in button.
Instead of button you can simply use anchor with #/test1 #/test2
If you still want this way you need another controller "main controller"
This can work:
// Code goes here
var myItemsApp = angular.module('myItemsApp', ['ngRoute']);
myItemsApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/test1', {
templateUrl: 'test1.html',
controller: 'button1Controller'
})
.when('/test2', {
templateUrl: 'test2.html',
controller: 'button2Controller'
})
.when('/test3', {
templateUrl: 'test3.html',
controller: 'button3Controller'
})
.otherwise({
redirectTo: '/'
});
}]);
myItemsApp.controller('initialController', ['$scope', '$location', function($scope, location) {
$scope.submit1 = function() {
console.log("I clicked on submit button1Controller");
location.path('/test1');
}
$scope.submit2 = function() {
console.log("I clicked on submit button2Controller ");
location.path('/test2');
}
$scope.submit3 = function() {
console.log("I clicked on submit button3Controller");
location.path('/test3');
}
}]);
myItemsApp.controller('button1Controller', ['$scope', '$location', function($scope, location) {
}]);
myItemsApp.controller('button2Controller', ['$scope', '$location', function($scope, location) {
}]);
myItemsApp.controller('button3Controller', ['$scope', '$location', function($scope, location) {
}]);
Plunker demo
I'm calling for the bootstrap modal HTML file from my main HTML file here is an example code of what I'm doing. Link
<div class="container" ng-controller="MainAngularControler"> <!--The main div with the controller in it-->
As it shows can anyone suggest a way to call another Angular controller for bootstrap modal. because the button that calls for the modal to load is in a div which already has an angular controller, this doesn't let the modal to load another different angular controller. The idea behind all these is to make my code more understandable.
When creating the modal instance in your angular controller you need to pass the modal controller like this.
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
Have a look at this plunker or the code below.
var app = angular.module('plunker', ["ui.bootstrap"]);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.OpenModal = function(){
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
modalInstance.result.then(function (selectedItem) {
//$ctrl.selected = selectedItem;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('modalController', function($scope){
$scope.text = 'I am from modal controller SCOPE';
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
THIS IS A MODAL. {{text}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</script>
<a ng-click="OpenModal()">Open Modal</a>
</body>
</html>
I'm new to angularJS. When I click a button it will show a dialog, the dialog's html code is:
<img id="imgId" ng-src="{{imgSrc}}">
In controller, when I try to access imgId using JavaScript it showing null. Same with the JQuery.
console.log(document.getElementById('imgId')); // null
Here is my code:
angular.module('BlankApp', ['ngMaterial']).
controller('mainController', function($scope, $mdDialog) {
$scope.showCustomDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
template: '{{hello}}<img id="imgId" ng-src="{{imgSrc}}">',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
});
function DialogController($scope, $timeout) {
$scope.hello = "Hello World";
$scope.imgSrc = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcScku8D7qo2hWD-eqb_WKTVjMjjiJFLo7uDQQ4RZWRNw9TJ-j7nYg";
$timeout(function() {
console.log(document.getElementById('imgId'));
console.log(angular.element(document.getElementById('imgId')));
});
}
}
});
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-controller="mainController" ng-cloak>
<md-button ng-click="showCustomDialog($event)" class="md-primary">Show Dialog</md-button>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html>
(plunker)
You need to give the dialog a chance to render, before you can get a reference to it.
Wrap the getElementById calls in a $timeout:
$timeout(function(){
console.log(document.getElementById('imgId'));
console.log(angular.element(document.getElementById('imgId')));
});
Keep in mind that you need to include the $timeout in your controller:
function DialogController($scope, $timeout) {
Here's a working example using your plunker's code:
angular.module('BlankApp', ['ngMaterial']).
controller('mainController', function($scope, $mdDialog) {
$scope.showCustomDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
template: '{{hello}}<img id="imgId" ng-src="{{imgSrc}}">',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
});
function DialogController($scope, $timeout) {
$scope.hello = "Hello World";
$scope.imgSrc = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcScku8D7qo2hWD-eqb_WKTVjMjjiJFLo7uDQQ4RZWRNw9TJ-j7nYg";
$timeout(function() {
console.log(document.getElementById('imgId'));
console.log(angular.element(document.getElementById('imgId')));
});
}
}
});
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-controller="mainController" ng-cloak>
<md-button ng-click="showCustomDialog($event)" class="md-primary">Show Dialog</md-button>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html>
How can I change some variable at view by pressing button using Angular?
For example view:
<div id="someDiv" ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
<button type="button" ng-click="changeValue('Joe')"></button>
</div>
Script:
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope){
$scope.firstname = "Johny";
$scope.changeValue= function(param) {
$scope.firstname = param;
}
});
I expect when I'll press button then instead Johny will be Joe (as in parameter).
At the moment when i click on the button nothing happens
#EDIT
Ok i know where is the problem. This works fine at my main div. However it doesn't work on my second div:
I run script below by clicking other button, and this script changed my div
function show(div_id){ //div_id is `someDiv`
document.getElementById('main_place').innerHTML = document.getElementById(div_id).innerHTML;
}
But why angular script doesn't work on this div?
Please check that one.
HTML:
<div id="someDiv" ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
<button type="button" ng-click="changeValue('Joe')"></button>
</div>
JS:
var myApp = angular.module('myApp',[]);
myApp.controller("myCtrl", function($scope){
$scope.firstname = "Johny";
$scope.changeValue= function(param) {
$scope.firstname = param;
}
});
I created working example with your problem:
http://jsfiddle.net/halirgb/Lvc0u55v/
add
$scope.changeValue = function(newVal) {
$scope.firstname = newVal;
}
And on html put <p>{{firstname}}<p>
Try this in controller:
$scope.changeValue = function(changeName)
{
$scope.firstname = changeName;
};
In View:
<p>{{firstname}}</p>
Here is a working example
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope){
$scope.firstname = "Johny";
$scope.changeValue = function(param) {
$scope.firstname = param;
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="someDiv" ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
<button type="button" ng-click="changeValue('Joe')">Click</button>
</div>
</body>
</html>
https://plnkr.co/edit/dz553Og6E83wx0LF6NHT?p=preview