I am using angularjs. i have one header.html and I have merged that html page into another html using ng-include.
Also, I have one dropdown list in header.html and I want the selected value (from dropdown) list to be displayed. How can I do this?
header.html
<html ng-app="app" >
<head>
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="controller/headerctrl.js"></script>
</head>
<body ng-controller="headerctrl">
<select id="valueid" class="form-control" required typeof="text" ng-model="valuselect" form="Floorform" >
<option value="">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</body>
</html>
Content.html
<html ng-app="app" >
<head>
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="controller/Contentctrl.js"></script>
</head>
<body >
<div id="header" ng-controller="headerctrl" ng-include="'header.html'">
</div>
<div id="sidebar" class="sidebar responsive ace-save-state" ng-controller="Contentctrl" >
//hi this content page here i get header dropdown selected value
</div>
</body>
</html>
HeaderController
var app = angular.module("app", []);
app.controller('headerctrl', ['$scope', '$http', '$window',
function ($scope, $http, $window, ) {
}]);
content Controller
var app = angular.module("app", []);
app.controller('contentctrl', ['$scope', '$http', '$window',
function ($scope, $http, $window, ) {
}]);
You can use services for it
app.factory('myService', function() {
var savedData = [];
return {
set: set,
get: get
}
function set(data) {
savedData.push(data)
}
function get() {
return savedData;
}
});
Here is plnkr
https://plnkr.co/edit/EIqgNJRgeOwY0zDsIDoU?p=preview
Related
This is my code
index.html
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle"/>
<hr/>
<h1>Favorite Player - {{ lchandle }}</h1>
</div>
</body>
app.js
var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope' , '$filter' , function( $scope , $filter )
{
$scope.handle = "";
var tolower = function(){
return $filter('lowercase')($scope.handle);
}
$scope.lchandle = tolower();
}]);
The favorite player does update when I change in the input
Can you please tell me what I am doing wrong?
You can achieve this by adding a $watch for the variable and variable
DEMO
var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope','$filter' , function( $scope , $filter )
{
$scope.$watch('handle', function() {
$scope.handle = $filter('lowercase')($scope.handle);
});
}]);
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle"/>
<hr/>
<h1>Favorite Player - {{ handle }}</h1>
</div>
</body>
You need to pass a function instance, instead of its result after calling it. So change it from $scope.lchandle = tolower(); to $scope.lchandle = tolower;.
Then you can call (execute) it with <h1>Favorite Player - {{ lchandle() }}</h1>
var myApp = angular.module("myApp", []);
var controller = myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter) {
$scope.handle = "";
var tolower = function() {
return $filter('lowercase')($scope.handle);
}
$scope.lchandle = tolower;
}]);
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle" />
<hr/>
<h1>Favorite Player - {{ lchandle() }}</h1>
</div>
</body>
Unless you are planning to change your filter, I suggest to use a different syntax for filters:
<h1>Favorite Player - {{ handle | lowercase }}</h1>
Based on previous answer by Sajeetharan I made version with ng-change, which I think is easier to figure out and more modern.
var myApp = angular.module("myApp" , []);
var controller = myApp.controller( 'mainController' , [ '$scope','$filter' , function( $scope , $filter )
{
$scope.lowercase = function() {
$scope.lhandle = $filter('lowercase')($scope.handle);
};
}]);
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js"</script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<label>Who is your favorite player</label><br>
<input type="text" ng-model="handle" ng-change="lowercase()"/>
<hr/>
<h1>Favorite Player - {{ lhandle }}</h1>
</div>
</body>
I'm trying to set a default value to the select box's options using ng-init in angular js but it isn't working. Here's the code that I have written so far.
var app = angular.module("myApp", [])
app.controller("mainController", ["$scope", function($scope){
$scope.myoptions = "";
$scope.mainList = [
"firstOption",
"secondOption",
"thirdOption"
]
}]);
select{
width:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<select ng-controller="mainController" ng-options="options as options for options in mainList" ng-model="myoptions" nginit="myoptions=mainList[1]">
</select>
</body>
Please help me with it. Thanks in advance :)
you have
nginit
which should be
ng-init
It will be ng-init there is no nginit directive in angular js
var app = angular.module("myApp", [])
app.controller("mainController", ["$scope", function($scope){
$scope.myoptions = "";
$scope.mainList = [
"firstOption",
"secondOption",
"thirdOption"
]
}]);
select{
width:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<select ng-controller="mainController" ng-options="options as options for options in mainList" ng-model="myoptions" ng-init="myoptions=mainList[1]">
</select>
</body>
ng-init="myoptions=mainList[0]"
change nginit="myoptions = mainList[1]"
to ng-init="myoptions = mainList[1]"
var app = angular.module("myApp", [])
app.controller("mainController", ["$scope", function($scope){
$scope.mainList = [
"firstOption",
"secondOption",
"thirdOption"
]
}]);
select{
width:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<select ng-controller="mainController" ng-options="options as options for options in mainList" ng-model="myoptions" ng-init="myoptions = mainList[1]">
</select>
</body>
I have two controllers in a template. I am passing data between them using a service. However when the model value is updated using a textbox, the text is refreshed (two-way) only on the first div that uses first controller.
How to get the second div data refreshed
Without using watch or ng-change
With using watch
Reference:
Using ng-change instead of $watch in Angular
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div class="container" style="padding-top: 20px;">
<div ng-controller="myController">
<input type="text" ng-model="valueA">
<p>From First: {{valueA}}</p>
</div>
</div>
<div class="container" style="padding-top: 20px;">
<div ng-controller="mySECONDController">
<p>From Second: {{valueB}}</p>
</div>
</div>
<script>
//defining module
var app = angular.module('myApp', []);
//defining service
app.service('myService', function () {
this.name = '';
this.setName = function (newName)
{
this.name = newName;
};
this.getName = function ()
{
return this.name;
};
}
);
//defining controller
app.controller('myController', function ($scope, myService) {
myService.setName("Lijo");
$scope.valueA = myService.getName();
});
//defining controller
app.controller('mySECONDController', function ($scope, myService) {
$scope.valueB = myService.getName();
});
</script>
</body>
</html>
What you can do is set the value to the service in the first controller and get it using the service in the second one. So it will be always reffering to the value that is stored in the Service.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div class="container" style="padding-top: 20px;">
<div ng-controller="myController">
<input type="text" ng-model="valueA" ng-change="myService.setName(valueA)">
<p>From First: {{myService.getName()}}</p>
</div>
</div>
<div class="container" style="padding-top: 20px;">
<div ng-controller="mySECONDController">
<p>From Second: {{myService.getName()}}</p>
</div>
</div>
<script>
//defining module
var app = angular.module('myApp', []);
//defining service
app.service('myService', function () {
this.name = '';
this.setName = function (newName)
{
this.name = newName;
};
this.getName = function ()
{
return this.name;
};
}
);
//defining controller
app.controller('myController', function ($scope, myService) {
myService.setName("Lijo");
$scope.myService= myService;
$scope.valueA = myService.getName();
});
//defining controller
app.controller('mySECONDController', function ($scope, myService) {
$scope.myService= myService;
});
</script>
</body>
</html>
Below I have code example that will successfully group data based on a model property for an ng-repeat, but only on the initial page load. So for example on load I do
$scope.filter_items.group_1 = 'propb'; , which correctly repeats and groups by propb. Same if I switch it to propa.
The problem is that after the page loads, changing the filter_items model via an input has no effect on he ng-repeat, which doesn't update. I've tried to work a bit with the .$apply() method, but nothing that worked (and from what I read I shouldn't have to use it). How can I get the ng-repeat to redraw after a model input change?
Note: I use the memoize function to avoid Angular digest errors, which will happen without it.
http://plnkr.co/N41D2Y
<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0" data-require="angular.js#*"></script>
<script data-require="underscore.js#*" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var app = angular.module("MyApp", []);
app.controller('MyCtrl', function($scope) {
$scope.filter_items = {};
$scope.filter_items.group_1 = 'propb';
$scope.items = [{id:"1", propa:"one", propb:"uno"},{id:"2", propa:"one", propb:"tres"}]
return
});
app.filter('myFilter', function() {
return _.memoize(function(items, filter_items) {
return _.groupBy(items, filter_items.group_1);
}
);
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
Group by<br>
<select ng-model="filter_items.group_1">
<option value="propa">A</option>
<option value="propb">B</option>
</select>
<div ng-repeat="(group1, g_items) in items| myFilter:filter_items">
<h2>{{group1}}</h2>
</div>
</div>
</body>
</html>
I can't get your code working or then there's just something I don't understand or missed. But if custom filter is giving you headache, why don't you just put simple grouping function inside your controller?
Say, your controller
var app = angular.module("MyApp", []);
app.controller('MyCtrl', function($scope) {
$scope.items = [{
id:1,
propa:"one",
propb:"uno"
},{
id:2,
propa:"one",
propb:"uno"
},{
id:3,
propa:"two",
propb:"dos"
},{
id:4,
propa:"two",
propb:"dos"
}];
$scope.notGrouped = angular.copy($scope.items);
$scope.options = ['propa','propb'];
$scope.groupBy = function (option) {
$scope.items = _.groupBy($scope.notGrouped, option);
}
});
and related HTML template
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
Group by<br>
<select ng-model="selectedOption"
ng-options="option as option for option in options"
ng-change="groupBy(selectedOption)">
</select>
<br><br>
<div ng-hide="!!selectedOption">Not grouped yet...</div>
<div ng-repeat="item in items">
<span>{{ item | json }}</span>
</div>
</div>
</body>
Would give you
index.html is as:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>HTTP Request</title>
<script src="angularjs"></script>
<script src="appjs"></script>
</head>
<body>
<p>Data sharing example :</p>
<div ng-controller="firstCtrl">
<input type="text" ng-model="numval">
<p>Inside first DIV : {{numval}}</p>
</div>
<div ng-controller="secondCtrl">
<input type="text" ng-model="numval">
<p>Inside second DIV : {{numval}}</p>
</div>
</body>
</html>
And app.js is as :
var myApp = angular.module('myApp', []);
myApp.service('sharedata', function() {
return 'common data';
});
myApp.controller('firstCtrl', ['$scope', '$http', 'sharedata', function($scope, $http, sharedata) {
alert('first');
$scope.numval='first';
$scope.numval=sharedata;
}]);
myApp.controller('secondCtrl', ['$scope', '$http', 'sharedata', function($scope, $http, sharedata) {
alert('second');
$scope.numval='second';
$scope.numval = sharedata;
}]);
I am unable to find the stupid mistake....! I am expecting that whether I change data in first input box or in second, I should see the changes reflected in both the DIV tags.
Try the following:
var myApp = angular.module('myApp', []);
myApp.service('sharedata', function() {
return {numval: "Something"};
});
myApp.controller('firstCtrl', ['$scope', '$http', 'sharedata',
function($scope, $http, sharedata) {
alert('first');
$scope.sharedata = sharedata;
}]
);
myApp.controller('secondCtrl', ['$scope', '$http', 'sharedata',
function($scope, $http, sharedata) {
alert('second');
$scope.sharedata = sharedata;
}]
);
And the HTML, both <div>s:
<input type="text" ng-model="sharedata.numval">
<p>Inside ___ DIV : {{sharedata.numval}}</p>
Your mistakes:
$scope.numval='first'; $scope.numval=sharedata; doesn't make sense...
The sharedata service is returning a value; you cannot change a value; you should return a reference (i.e. the object) that contains the value. That way both scopes can write to it.