I have a problem when I want passing data of select input between controllers
I can do with input (text or similar) but i don´t know with input like selects, checkbox and radio box...
How can I get the select data in the second controller?
Here an simple example
Thanks!
var myApp = angular.module("myApp", []);
myApp.controller("ExampleOneController", function($scope, NewsService) {
$scope.news = NewsService.news;
});
myApp.controller("ExampleTwoController", function($scope, NewsService) {
$scope.news = NewsService.news;
});
myApp.service("NewsService", function() {
return {
news: [{
theme: "This is one new"
}, {
theme: "This is two new"
}, {
theme: "This is three new"
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="ExampleOneController">
<h2>
ExampleOneController
</h2>
<select ng-options="item as item.theme for item in news track by item.theme" ng-model="data.singleSelect"></select>
singleSelect = {{data.singleSelect.theme}}
</div>
<div ng-controller="ExampleTwoController">
<h2>
ExampleTwoController
</h2>
<h2>
singleSelect = {{data.singleSelect.theme}}
</h2>
</div>
</body>
By encapsulating <div ng-controller="ExampleTwoController"> inside <div ng-controller="ExampleOneController">.
var myApp = angular.module("myApp", []);
myApp.controller("ExampleOneController", function($scope, NewsService) {
$scope.news = NewsService.news;
});
myApp.controller("ExampleTwoController", function($scope, NewsService) {
$scope.news = NewsService.news;
});
myApp.service("NewsService", function() {
return {
news: [{
theme: "This is one new"
}, {
theme: "This is two new"
}, {
theme: "This is three new"
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="ExampleOneController">
<h2>ExampleOneController</h2>
<select ng-options="item as item.theme for item in news track by item.theme" ng-model="data.singleSelect"></select>
singleSelect = {{data.singleSelect.theme}}
<div ng-controller="ExampleTwoController">
<h2>ExampleTwoController</h2>
<h2>singleSelect = {{data.singleSelect.theme}}</h2>
</div>
</div>
</body>
So, I found a solution, here can see a simple example of passing data between controllers ;)
var myApp = angular.module('myApp',[]);
myApp.service('myService', function(){
this.selected = {
item: 'A' // I want this to return the currently selected value - If val is changed to 'B', update the text input accordingly.
}
});
myApp.service('NewsService', function(){
return {
news: [{
theme: "This is one new"
}, {
theme: "This is two new"
}, {
theme: "This is three new"
}]
}
});
myApp.controller('AController', ['$scope', 'myService','NewsService', function($scope, myService, NewsService){
$scope.selected = myService.selected;
$scope.news = NewsService.news;
}]);
myApp.controller('BController', ['$scope', 'myService','NewsService', function($scope, myService,NewsService){
$scope.mySelected = myService.selected;
$scope.myNews = NewsService.news;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="AController">
<h1>
controlador 1
</h1>
<select name="" id="" ng-model="selected.item">
<option value="A">Option A</option>
<option value="B">Option B</option>
</select>
<select ng-options="item as item.theme for item in news track by item.theme" ng-model="news.item"></select>
</div>
<div ng-controller="BController">
<h1>
controlador 2
</h1>
<input type="text" ng-model="mySelected.item">
{{mySelected.item}}
{{myNews.item}}
{{myNews.item.theme}}
<br>
<select ng-options="item as item.theme for item in myNews track by item.theme" ng-model="myNews.item"></select>
</div>
</div>
Related
I am new at angular. I would like that by clicking on the selected radio input, the label turns green. How can I do it?
<div ng-app="myApp">
<div ng-controller="myController">
<div>Which one?</div>
<label class="radio" ng-repeat="eval in evaluators">
<input type="radio" ng-model="cell.evaluator" name="evaluatorOptions" value="{{eval.name}}">{{eval.name}}
</label>
<hr />
<div>You picked: {{cell.evaluator}}</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.cell = {
evaluator: "Guava2"
};
$scope.evaluators = [{
name: "Guava1"
}, {
name: "Guava2"
}];
});
http://jsfiddle.net/77axwybr/
You can use ng-class to dynamically set the class of the label using a method on scope that checks the current value with that set in ng-model.
<style>
.selected {
background: green;
}
</style>
<div ng-app="myApp">
<div ng-controller="myController">
<div>Which one?</div>
<label ng-class="{selected: isSelected(eval.name) }" class="radio" ng-repeat="eval in evaluators">
<input type="radio" ng-model="cell.evaluator" name="evaluatorOptions" value="{{eval.name}}">{{eval.name}}
</label>
<hr />
<div>You picked: {{cell.evaluator}}</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.isSelected = (name) => $scope.cell.evaluator === name;
$scope.cell = {
evaluator: "Guava2"
};
$scope.evaluators = [{
name: "Guava1"
}, {
name: "Guava2"
}];
});
http://jsfiddle.net/vsdvcepn/
i have this controller with name of three color.
<script>
angular.module('radioExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.color = [{
name: "Red"
},
{
name: "green"
},
{
name: "Blue"
}
];
}]);
</script>
I'd like to create 3 radio button who show the correspondig color and show on screen
<label>
<input type="radio" ng-model="color.name" value="red"> Red
<tt>color = {{color.name }}</tt>
</label>
i desire take the value directly from array and not from value. how i can do?
i have try with value="color.name" but don't run.
thank you.
All you need is a ng-repeat. here is a working sample.
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.colorName = "Blue";
$scope.colors = [{
name: "Red"
}, {
name: "green"
}, {
name: "Blue"
}];
}
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<label ng-repeat="color in colors">
<input type="radio" ng-model="$parent.colorName" ng-value="color.name" name="color-picker" />{{color.name}}
</label>
<tt>color = {{colorName}}</tt>
</div>
</div>
Or else using controllerAs Syntax you could do this.
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.colorName = "Blue";
$scope.colors = [{
name: "Red"
}, {
name: "green"
}, {
name: "Blue"
}];
}
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController as sc">
<label ng-repeat="color in colors">
<input type="radio" ng-model="sc.colorName" ng-value="color.name" name="color-picker" />{{color.name}}
</label>
<tt>color = {{sc.colorName}}</tt>
</div>
</div>
Below is my code. When user clicks on "select all" all items get selected.
what I want is when user click on any option that option should be disabled.
var app = angular.module('sampleApp', []);
app.controller('sampleController', ['$scope',
function($scope) {
$scope.selectAll = false;
}
])
.disabled {
opacity: 0.5
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<label ng-click="selectAll = !selectAll">Select all</label>
<div ng-class="selectAll ? 'enable' : 'disabled'">Option 1</div>
<div ng-class="selectAll ? 'enable' : 'disabled'">Option 2</div>
<div ng-class="selectAll ? 'enable' : 'disabled'">Option 3</div>
<div ng-class="selectAll ? 'enable' : 'disabled'">Option 4</div>
</div>
</div>
You need to wrap each item into a new object and place a field 'selected' on this object:
var app = angular.module('sampleApp', []);
app.controller('sampleController', ['$scope',
function($scope) {
$scope.options = [{
selected: false,
item: 'option 1'
}, {
selected: false,
item: 'option 2'
}, {
selected: false,
item: 'option 3'
}]
$scope.selectAll = function(select) {
angular.forEach($scope.options, function(o) {
o.selected = select;
});
};
}
])
.disabled {
opacity: 0.5
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<label ng-click="selectAll(true)">Select all</label>
<label ng-click="selectAll(false)">Deselect all</label>
<div ng-repeat="option in options" ng-class="{'disabled': !option.selected}" ng-click="option.selected = !option.selected">{{option.item}}</div>
</div>
</div>
How do I pass data from one page to another in angular js?
I have heard about using something as services but I am not sure how to use it!
Given below is the functionality I want to execute!
On page 1:
<div class="container" ng-controller="mycontrl">
<label for="singleSelect"> Select Date </label><br>
<select nAMe="singleSelect" ng-model="dateSelect">
<option value="2/01/2015">2nd Jan</option>
<option value="3/01/2015">3rd Jan</option>
</select>
<br>
Selected date = {{dateSelect}}
<br/><br/><br/>
<label for="singleSelect"> Select time </label><br>
<select nAMe="singleSelect" ng-model="timeSelect">
<option value="9/10">9AM-10AM</option>
<option value="10/11">10AM-11AM</option>
<option value="11/12">11AM-12PM</option>
<option value="12/13">12PM-1PM</option>
<option value="13/14">1PM-2PM</option>
</select>
<button ng-click="check()">Check!</button>
<br>
Selected Time = {{timeSelect}}
<br/><br/>
User selects time and date and that is used to make call to the db and results are stored in a variable array!
Page 1 controller:
var config= {
params: {
time: times,
date:dates
}
};
$http.get('/era',config).success(function(response) {
console.log("I got the data I requested");
$scope.therapist_list = response;
});
Now how do I send this variable $scope.therapist_list which is an array to next page which will be having a different controller and also if services is use how do define it in my application.js file
application.js:
var firstpage=angular.module('firstpage', []);
var secondpage=angular.module('secondpage', []);
To save the data that you want to transfer to another $scope or saved during the routing, you can use the services (Service). Since the service is a singleton, you can use it to store and share data.
Look at the example of jsfiddle.
var myApp = angular.module("myApp", []);
myApp.controller("ExampleOneController", function($scope, NewsService) {
$scope.news = NewsService.news;
});
myApp.controller("ExampleTwoController", function($scope,NewsService) {
$scope.news = NewsService.news;
});
myApp.service("NewsService", function() {
return {
news: [{theme:"This is one new"}, {theme:"This is two new"}, {theme:"This is three new"}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="ExampleOneController">
<h2>
ExampleOneController
</h2>
<div ng-repeat="n in news">
<textarea ng-model="n.theme"></textarea>
</div>
</div>
<div ng-controller="ExampleTwoController">
<h2>
ExampleTwoController
</h2>
<div ng-repeat="n in news">
<div>{{n.theme}}</div>
</div>
</div>
</body>
UPDATED
Showing using variable in different controller jsfiddle.
var myApp = angular.module("myApp", []);
myApp.controller("ExampleOneController", function($scope, NewsService) {
$scope.newVar = {
val: ""
};
NewsService.newVar = $scope.newVar;
$scope.news = NewsService.news;
});
myApp.controller("ExampleTwoController", function($scope, NewsService) {
$scope.anotherVar = NewsService.newVar;
$scope.news = NewsService.news;
});
myApp.service("NewsService", function() {
return {
news: [{
theme: "This is one new"
}, {
theme: "This is two new"
}, {
theme: "This is three new"
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="ExampleOneController">
<h2>
ExampleOneController
</h2>
<div ng-repeat="n in news">
<textarea ng-model="n.theme"></textarea>
</div>
<input ng-model="newVar.val">
</div>
<div ng-controller="ExampleTwoController">
<h2>
ExampleTwoController
</h2>
<div ng-repeat="n in news">
<div>{{n.theme}}</div>
</div>
<pre>newVar from ExampleOneController {{anotherVar.val}}</pre>
</div>
</body>
OK,
you write a another module ewith factory service e.g.
angular
.module('dataApp')
.factory('dataService', factory);
factory.$inject = ['$http', '$rootScope', '$q', '$log'];
function factory($http, $rootScope,$q,$log) {
var service = {
list: getList
};
service.therapist_list = null;
return service;
function getList() {
var config= {
params: {
time: times,
date:dates
}
};
$http.get('/era',config).success(function(response) {
console.log("I got the data I requested");
$scope.therapist_list = response;
});
$log.debug("get Students service");
$http.get('/era',config).then(function successCallback(response) {
service.therapist_list = response.data;
$log.debug(response.data);
}, function errorCallback(response) {
$log.debug("error" + response);
});
}
}
Add this module as dependencies to your both page apps like
var firstpage=angular.module('firstpage', [dataApp]);
var secondpage=angular.module('secondpage', [dataApp]);
and then in your controller consume that service
.controller('homeController', ['$scope', 'dataService', function ($scope, dataService) {
}]);
My view is:
<div class="container" ng-controller="MyController">
<div class="row">
<div class="col-md-8">
<textarea class="form-control" rows="10" ng-model="myWords" ng-change="parseLanguage()"></textarea>
</div>
<div class="col-md-4" ng-show="sourceLanguage !== null">
Language: {{ sourceLanguage }}
</div>
</div>
</div>
My controller is:
webApp.controller('MyController', [
'$scope', '$rootScope', 'TranslateService', function($scope, $rootScope, CodeService) {
$scope.init = function() {
return $scope.sourceLanguage = null;
};
$scope.parseLanguage = function() {
return TranslateService.detectLanguage($scope.myWords).then(function(response) {
console.log($scope.sourceLanguage);
$scope.sourceLanguage = response.data.sourceLanguage;
return console.log($scope.sourceLanguage);
});
};
return $scope.init();
}
]);
The console logs show the right data. But in the view, sourceLanguage never updates. Why would this be?
In case the promise you are evaluating is not part of the Angular context you need to use $scope.$apply:
$scope.parseLanguage = function() {
TranslateService.detectLanguage($scope.myWords).then(function(response) {
$scope.$apply(function() {
$scope.sourceLanguage = response.data.sourceLanguage;
});
});
};