I have just started learning Angular JS and created some basic samples however I am stuck with the following problem.
I have created 2 modules and 2 controllers.
shoppingCart -> ShoppingCartController
namesList -> NamesController
There are associated views for each controller. The first View renders fine but second is not rendering. There are no errors.
http://jsfiddle.net/ep2sQ/
Please help me solve this issue.
Also is there any possibility to add console in View to check what values are passed from Controller.
e.g. in the following div can we add console.log and output the controller values
<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
So basically as mentioned by Cherniv we need to bootstrap the modules to have multiple ng-app within the same page. Many thanks for all the inputs.
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [{
product_name: "Product 1",
price: 50
}, {
product_name: "Product 2",
price: 20
}, {
product_name: "Product 3",
price: 180
}];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);
angular.bootstrap(document.getElementById("App2"), ['namesList']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>{{_name.username}}</p>
</div>
</div>
To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap()
HTML
<!-- Automatic Initialization -->
<div ng-app="myFirstModule">
...
</div>
<!-- Need To Manually Bootstrap All Other Modules -->
<div id="module2">
...
</div>
JS
angular.
bootstrap(document.getElementById("module2"), ['mySecondModule']);
The reason for this is that only one AngularJS application can be automatically bootstrapped per HTML document. The first ng-app found in the document will be used to define the root element to auto-bootstrap as an application.
In other words, while it is technically possible to have several applications per page, only one ng-app directive will be automatically instantiated and initialized by the Angular framework.
You can use angular.bootstrap() directly... the problem is you lose the benefits of directives.
First you need to get a reference to the HTML element in order to bootstrap it, which means your code is now coupled to your HTML.
Secondly the association between the two is not as apparent. With ngApp you can clearly see what HTML is associated with what module and you know where to look for that information. But angular.bootstrap() could be invoked from anywhere in your code.
If you are going to do it at all the best way would be by using a directive. Which is what I did. It's called ngModule. Here is what your code would look like using it:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
You can get the source code for it at:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
It's implemented in the same way as ngApp. It simply calls angular.bootstrap() behind the scenes.
In my case I had to wrap the bootstrapping of my second app in angular.element(document).ready for it to work:
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("app2"), ["app2"]);
});
Here's an example of two applications in one html page and two conrollers in one application :
<div ng-app = "myapp">
<div ng-controller = "C1" id="D1">
<h2>controller 1 in app 1 <span id="titre">{{s1.title}}</span> !</h2>
</div>
<div ng-controller = "C2" id="D2">
<h2>controller 2 in app 1 <span id="titre">{{s2.valeur}}</span> !</h2>
</div>
</div>
<script>
var A1 = angular.module("myapp", [])
A1.controller("C1", function($scope) {
$scope.s1 = {};
$scope.s1.title = "Titre 1";
});
A1.controller("C2", function($scope) {
$scope.s2 = {};
$scope.s2.valeur = "Valeur 2";
});
</script>
<div ng-app="toapp" ng-controller="C1" id="App2">
<br>controller 1 in app 2
<br>First Name: <input type = "text" ng-model = "student.firstName">
<br>Last Name : <input type="text" ng-model="student.lastName">
<br>Hello : {{student.fullName()}}
<br>
</div>
<script>
var A2 = angular.module("toapp", []);
A2.controller("C1", function($scope) {
$scope.student={
firstName:"M",
lastName:"E",
fullName:function(){
var so=$scope.student;
return so.firstName+" "+so.lastName;
}
};
});
angular.bootstrap(document.getElementById("App2"), ['toapp']);
</script>
<style>
#titre{color:red;}
#D1{ background-color:gray; width:50%; height:20%;}
#D2{ background-color:yellow; width:50%; height:20%;}
input{ font-weight: bold; }
</style>
You can merge multiple modules in one rootModule , and assign that module as
ng-app to a superior element ex: body tag.
code ex:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="namesController.js"></script>
<script src="myController.js"></script>
<script>var rootApp = angular.module('rootApp', ['myApp1','myApp2'])</script>
<body ng-app="rootApp">
<div ng-app="myApp1" ng-controller="myCtrl" >
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<div ng-app="myApp2" ng-controller="namesCtrl">
<ul>
<li ng-bind="first">{{first}}
</li>
</ul>
</div>
</body>
</html>
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [{
product_name: "Product 1",
price: 50
}, {
product_name: "Product 2",
price: 20
}, {
product_name: "Product 3",
price: 180
}];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);
var namesModule = angular.module("namesList2", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("App2"), ['namesList']);
angular.bootstrap(document.getElementById("App3"), ['namesList2']);
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>{{_name.username}}</p>
</div>
</div>
<div id="App3" ng-app="namesList2" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>{{_name.username}}</p>
</div>
</div>
</body>
</html>
// root-app
const rootApp = angular.module('root-app', ['app1', 'app2E']);
// app1
const app11aa = angular.module('app1', []);
app11aa.controller('main', function($scope) {
$scope.msg = 'App 1';
});
// app2
const app2 = angular.module('app2E', []);
app2.controller('mainB', function($scope) {
$scope.msg = 'App 2';
});
// bootstrap
angular.bootstrap(document.querySelector('#app1a'), ['app1']);
angular.bootstrap(document.querySelector('#app2b'), ['app2E']);
<!-- angularjs#1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<!-- root-app -->
<div ng-app="root-app">
<!-- app1 -->
<div id="app1a">
<div ng-controller="main">
{{msg}}
</div>
</div>
<!-- app2 -->
<div id="app2b">
<div ng-controller="mainB">
{{msg}}
</div>
</div>
</div>
Only one app is automatically initialized. Others have to manually initialized as follows:
Syntax:
angular.bootstrap(element, [modules]);
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8" data-require="angular.js#1.5.8"></script>
<script data-require="ui-router#0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
var parentApp = angular.module('parentApp', [])
.controller('MainParentCtrl', function($scope) {
$scope.name = 'universe';
});
var childApp = angular.module('childApp', ['parentApp'])
.controller('MainChildCtrl', function($scope) {
$scope.name = 'world';
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('childApp'), ['childApp']);
});
</script>
</head>
<body>
<div id="childApp">
<div ng-controller="MainParentCtrl">
Hello {{name}} !
<div>
<div ng-controller="MainChildCtrl">
Hello {{name}} !
</div>
</div>
</div>
</div>
</body>
</html>
AngularJS API
You can define a Root ng-App and in this ng-App you can define multiple nd-Controler. Like this
<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController1', function ($scope) {
$scope.student = {
firstName: "MUKESH",
lastName: "Paswan",
fullName: function () {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
mainApp.controller('studentController2', function ($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fees: 500,
subjects: [
{ name: 'Physics', marks: 70 },
{ name: 'Chemistry', marks: 80 },
{ name: 'Math', marks: 65 },
{ name: 'English', marks: 75 },
{ name: 'Hindi', marks: 67 }
],
fullName: function () {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
<body>
<div ng-app = "mainApp">
<div id="dv1" ng-controller = "studentController1">
Enter first name: <input type = "text" ng-model = "student.firstName"><br/><br/> Enter last name: <input type = "text" ng-model = "student.lastName"><br/>
<br/>
You are entering: {{student.fullName()}}
</div>
<div id="dv2" ng-controller = "studentController2">
<table border = "0">
<tr>
<td>Enter first name:</td>
<td><input type = "text" ng-model = "student.firstName"></td>
</tr>
<tr>
<td>Enter last name: </td>
<td>
<input type = "text" ng-model = "student.lastName">
</td>
</tr>
<tr>
<td>Name: </td>
<td>{{student.fullName()}}</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<table>
<tr>
<th>Name</th>.
<th>Marks</th>
</tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
I have modified your jsfiddle, can make top most module as rootModule for rest of the modules.
Below Modifications updated on your jsfiddle.
Second Module can injected in RootModule.
In Html second defined ng-app placed inside the Root ng-app.
Updated JsFiddle:
http://jsfiddle.net/ep2sQ/1011/
Use angular.bootstrap(element, [modules], [config]) to manually start up AngularJS application (for more information, see the Bootstrap guide).
See the following example:
// root-app
const rootApp = angular.module('root-app', ['app1', 'app2']);
// app1
const app1 = angular.module('app1', []);
app1.controller('main', function($scope) {
$scope.msg = 'App 1';
});
// app2
const app2 = angular.module('app2', []);
app2.controller('main', function($scope) {
$scope.msg = 'App 2';
});
// bootstrap
angular.bootstrap(document.querySelector('#app1'), ['app1']);
angular.bootstrap(document.querySelector('#app2'), ['app2']);
<!-- angularjs#1.7.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<!-- root-app -->
<div ng-app="root-app">
<!-- app1 -->
<div id="app1">
<div ng-controller="main">
{{msg}}
</div>
</div>
<!-- app2 -->
<div id="app2">
<div ng-controller="main">
{{msg}}
</div>
</div>
</div>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="shoppingCartParentModule" >
<div ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>
<div ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="name in names">
<p>{{name.username}}</p>
</div>
</div>
</div>
</body>
<script>
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [
{product_name: "Product 1", price: 50},
{product_name: "Product 2", price: 20},
{product_name: "Product 3", price: 180}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [
{username: "Nitin"},
{username: "Mukesh"}
];
}
);
angular.module("shoppingCartParentModule",["shoppingCart","namesList"])
</script>
</html>
Related
So the thing is:
I have four cards and I have a ng-click on the first one with a function named OpenCard().
When I click, it shows its hidden content.
I wanna do the same for the rest of the cards, using the same call to OpenCard().
My four classes have the same name "rowCont" and the hidden content inside that "rowCont" is different:
<div class="rowCont" ng-click="OpenCard()" ng-class="{'active': isActive}">
<div class="hiddenContent">
<div class="animate-show" ng-show="cardVisible">
</div>
</div>
</div>
$scope.isActive = false;
$scope.OpenCard = function () {
if($scope.isActive == false) {
$scope.isActive = true;
$scope.cardVisible = true;
} else {
$scope.isActive = false;
$scope.cardVisible = false;
}
}
I'm using Angular 1.6.0
Do you have an idea how can I refer to one card in specific using the same function on ng-click? Cause when I click one in one closed card it shows the content of all cards.
<div class="row">
ng-repeat="x in current_tab
ng-class="{active1 : activeMenu === x}"
ng-click="setActive(x);"> {{x.userId}}
</div>
$scope.menuItems = $rootScope.current_tab;
$scope.activeMenu = $scope.menuItems[0];
$scope.setActive = function(menuItem) {
$scope.activeMenu = menuItem
}
var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.cards = [{
isActive: false,
title: '1',
content: 'content 1'
}, {
isActive: false,
title: '2',
content: 'content 2'
}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ngClickApp">
<head>
<title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<div class="rowCont" ng-repeat="card in cards track by $index" ng-click="card.isActive=!card.isActive" ng-class="{'active': c.isActive}">
card {{$index}}
<div class="hiddenContent">
<div class="animate-show" ng-show="card.isActive">
{{card.content}}
</div>
</div>
</div>
</body>
</html>
You can store card's visibility in an array ($scope.cardsVisible = [];), and pass an index in each call to OpenCard(cardIndex).
Then, display it conditionnaly in your view:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.cardsVisible = [];
$scope.OpenCard = function(cardIndex) {
$scope.cardsVisible[cardIndex] = true;
$scope.isActive = cardIndex;
}
}
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-click="OpenCard(1)" ng-class="{'active': isActive == 1}">
Card 1
<div ng-show="cardsVisible[1]">
This card is visible
</div>
</div>
<div ng-click="OpenCard(2)" ng-class="{'active': isActive == 2}">
Card 2
<div ng-show="cardsVisible[2]">
This card is visible
</div>
</div>
</div>
If I add a row with Dynamic Angular JS variable, it is not working.
Below is my code. Please help me let know the issue.
Also please note that the inner HTML in my original code is 600 lines long. In this example I have used simple div to simplify.
<div data-ng-init="quantity_r=1;price_r=5">
<h2>Cost Calculator Quantity:</h2>
<input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
<div>
Total in dollar: {{quantity_r * price_r}}
</div>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
});
</script>
<script>
var app = angular.module('myApp1', []);
app.controller('AppCtrl', function($scope) {
angular.module('ngAppDemo', []).controller('ngAppDemoController', function($scope) {
$scope.a = 1;
$scope.b = 2;
});
});
function replicateRegion() {
var table = document.getElementById("idTable");
var lastRow = table.rows.length;
var row = table.insertRow(lastRow);
var cell1 = row.insertCell(0);
var sHTML =document.getElementById("idTableTD1").innerHTML;
sHTML=sHTML.replace("_r", "_r" + lastRow.toString());
sHTML=sHTML.replace("Cost Calculator Quantity:", "Cost Calculator Quantity: Row Added " + lastRow.toString());
cell1.innerHTML = sHTML;
}
</script>
<div id="id1" ng-app="myApp" ng-controller="AppCtrl">
<button onclick="replicateRegion()">insert Row</button>
<table id="idTable">
<tr><td id="idTableTD1">
<div data-ng-init="quantity_r=1;price_r=5">
<h2>Cost Calculator Quantity:</h2>
<input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
<div>
Total in dollar: {{quantity_r * price_r}}
</div>
</td></tr>
</table>
</div>
</body>
</html>
Only the first row which is static has the correct output. The rows added after button-click "Insert Row" have the problematic Angular JS output. Please help.
You need to add the code for replicateRegion() function inside the AngularJS controller and use the $compile service to bind the dynamically generated HTML into the AngularJS DOM.
var myapp = angular.module('myApp', []);
myapp.controller('AppCtrl', function ($compile, $scope) {
$scope.a = 1;
$scope.b = 2;
$scope.replicateRegion = function(){
var table = document.getElementById("idTable");
var lastRow = table.rows.length;
var row = table.insertRow(lastRow);
var template = `<div data-ng-init="quantity_r=1;price_r=5">
<h2>Cost Calculator Quantity:</h2>
<input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
<div>
Total in dollar: {{quantity_r * price_r}}
</div>
</div>`;
var cell1 = row.insertCell(0);
template=template.replace(/_r/g, "_r" + lastRow.toString());
template=template.replace("Cost Calculator Quantity:", "Cost Calculator Quantity: Row Added " + lastRow.toString());
cell1.innerHTML = template;
$compile(cell1)($scope); //Now compile it to render the directive.
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="id1" ng-app="myApp" ng-controller="AppCtrl">
<button ng-click="replicateRegion()">insert Row</button>
<table id="idTable">
<tr><td id="idTableTD1">
<div data-ng-init="quantity_r=1;price_r=5">
<h2>Cost Calculator Quantity:</h2>
<input type="number" ng-model="quantity_r"> Price: <input type="number" ng-model="price_r">
<div>
Total in dollar: {{quantity_r * price_r}}
</div>
</div>
</td></tr>
</table>
</div>
Also notice that var template that specifies a generic template that should be inserted in the HTML dynamically on click. It is always a good practice to specify a static HTML template instead of extracting the generated HTML from the page and using that, which you have done.
When you add markup manually, like
document.getElementById('idTableTD1').innerHTML= '<div dynamic></div>'
you are bypassing all AngularJS code. You should do it rather as this:
angular.element("#idTableTD1").html('<div dynamic></div>');
may be this will help.
The thing is as told in the title.
(function(){
var app = angular.module('sbi', [ ]);
app.controller('PanelController', function (){
this.tab = 1;
this.selectTab = function (setTab){
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
app.controller('MyCtrl', function($scope, $compile) {
'use strict';
$scope.data = { "name": ""};
$scope.reset = function() {
$scope.data.name = "";
$scope.data.codeSub = "";
$scope.data.cognSub = "";
$scope.data.codfis = "";
$scope.data.drpdownvalue = "";
$scope.form.$setPristine();
}
});
app.controller('DdController', function($scope, $compile) {
'use strict';
var loadUrl = contextName+"/subinstaller/inserimento/dettaglio.do?methodName=doListenerStato";
$.ajax({
async: false,
url : loadUrl,
type: "GET",
data: data,
dataType: 'json',
cache: false,
complete: function(){
_show_(false,'waitPanel');
},
success : function (data, stato) {
$('#service').empty()
for(var i = 0; i < data.length; i++) {
$("#service").append($('<option value="'+data[i].code+'">'+data[i].descr+'</option>'));
}
$('#service').trigger("chosen:updated");
},
error : function (richiesta, stato, errori) {
_show_(false,'waitPanel');
alert("error caricaServices");
}
});
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script><!DOCTYPE html>
<html ng-app="sbi">
<head>
<link href="utils/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<style>
table, td { border-width: 2px; border-collapse: collapse; padding: 15px; color: #000000; text-align: center; }
table.pos_fixed1 { position:relative; top:30px; left:10px; }
</style>
</head>
<body>
<form name="form">
<div data-ng-controller="MyCtrl">
<table summary="" width="10%" class="pos_fixed1" align="center">
<tr><td>Code Subinstaller<br><input type="text" ng-model="data.codeSub" /></td>
<td>Stato<br>
<select ng-model="data.drpdownvalue">
<option value=""> -- Seleziona -- </option>
</select> </td><td></td></tr>
<tr><td>Nome Sub Installer<input type="text" ng-model="data.name" /></td>
<td>Cognome Sub Installer<input type="text" ng-model="data.cognSub" /></td>
<td>Codice Fiscale<input type="text" ng-model="data.codfis" /></td></tr>
</table><br><br>
</form>
<section>
<div class="text-center">
<form name="form" id="form" novalidate>
<div>
<button class="btn-xs" data-ng-click="">Cerca</button>
<button class="btn-xs" ng-click="reset()">Pulisci</button>
</div>
</div>
</form>
</div>
</section>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills" >
<li ng-class="{ active:panel.isSelected(1) }"> <a href ng-click="panel.selectTab(1)">Risultati</a></li>
<li ng-class="{ active:panel.isSelected(2) }"> <a href ng-click="panel.selectTab(2)">Dettaglio</a></li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Risultati</h4>
<p> :))) </p>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h4>Dettaglio</h4>
<p> Not skilled enough yet</p>
</div>
</section>
<script type="text/javascript" src="utils/angular.min.js"></script>
<script type="text/javascript" src="controllers/sbi_inserimento_controller1.js"></script>
</body>
</html>
The function "DoListenerStato" has its query and it works (tried in Java)
But the combobox is not being populated.
Have I used ajax correctly? If so, what can I do?
I'd prefer to keep using ajax for this work, if possible.
Can you try $http.get instead of $.ajax.
in Controller.js file:
$scope.data = {};
$http.get(loadUrl).then(function (response){
$scope.data = response.data;
//success callback
}, function (response) {
//error callback
});
Since you already have data.**** in your ng-model this should solve it.
I'm trying to get multiple Angular Material checkboxes with the same ng-model. I have two problems: how to get default checked checkboxes, and how to make at least one of these checkboxes to be required. I tried with ng-checked, but then I can't POST the values through the form.
HTML
<label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label>
<div class="col-sm-10" >
<span class="col-sm-2" ng-repeat="period in periods">
<md-checkbox ng-model="form.periods[period]" ng-click="toggle(period, selected)">
{{ period }}. sat
</md-checkbox>
</span>{{selected | json}}
</div>
App.js
$scope.periods = [1,2,3,4,5,6,7,8,9,0]; /*broj sati*/
$scope.selected = [2];
$scope.toggle = function (period, list) {
var idx = list.indexOf(period);
if (idx > -1) {
list.splice(idx, 1);
}
else {
list.push(period);
}
};
$scope.exists = function (period, list) {
return list.indexOf(period) > -1;
};
Please, help.
Actually your ngModel is an object, so to get selected value rendered on load, you should do the following:
$scope.model = {};
$scope.model.periods = {"2": true};
And to get all selected checkboxes you should iterate over the keys, as below:
$scope.save = function() {
// Get all checked boxes
var checked = Object.keys($scope.model.periods).filter(function(key) {
return $scope.model.periods[key];
});
console.log(checked);
}
See it working:
(function() {
angular
.module('app', ['ngMaterial'])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.model = {};
$scope.model.periods = {"2": true};
$scope.periods = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; /*broj sati*/
$scope.save = function() {
// Get all checked boxes
var checked = Object.keys($scope.model.periods).filter(function(key) {
return $scope.model.periods[key];
});
console.log(checked);
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form">
<div class="col-md-12">
<label for="inputPassword3" class="col-sm-2 control-label">Školski sat *</label>
<div class="col-sm-10">
<span class="col-sm-2" ng-repeat="period in periods">
<md-checkbox ng-model="model.periods[period]">
{{ period }}. sat
</md-checkbox>
</span>
</div>
<span ng-bind="model.periods | json"></span>
<hr>
<button type="button" class="btn btn-success" ng-click="save()">Save data</button>
</div>
</form>
</body>
</html>
I hope it helps.
It seems so easy but I can't get this to work:
I want ng-repeat to show the entry only when istLand == 1.
<body ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="ort in orte | filter:{istLand : 1}">
{{ ort.ortsname }}
</div>
</div>
</body>
function Ctrl($scope) {
$scope.orte = {"2812197":{"ortsname":"Berlin","istLand":1},
"2829695":{"ortsname":"Munich","istLand":0}}
}
you can try something like this
<div ng-repeat="ort in orte">
<span ng-if="ort.istLand == 1">{{ ort.ortsname }} </span>
</div>
OR
your code will work if you following below structure
$scope.orte = [
{id:"2812197", ortsname:"Berlin", istLand:1},
{id:"2829695", ortsname:"Munich", istLand:0}
]
here is the Demo Fiddle
By using custom filter in angularjs, implement the same.
function Ctrl($scope) {
$scope.orte = {"2812197":{"ortsname":"Berlin","istLand":1},"2829695":{"ortsname":"Munich","istLand":0},"2829694":{"ortsname":"Delhi","istLand":1},"2829696":{"ortsname":"Beijing","istLand":0},"2829698":{"ortsname":"Sydney","istLand":1}}
}
angular.module('myApp', []).
filter('istLandCheck', function() {
return function(orte,istLand) {
var out=[];
angular.forEach(orte, function(ort,value){
if(ort.istLand==1){
out.push(ort);
}
});
return out;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="Ctrl">
<div ng-repeat="ort in orte|istLandCheck">
{{ ort.ortsname }}
</div>
</div>
</body>