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>
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/
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>
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>
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>
I would like use isOpen attributes in angualr ui bootstrap accordion directive so it would open the first element of the first ng-repeat in the accordion. I have tried few things with no luck. can anyone advise on this?
//html
<div ng-show="accordionCtrl.isNotString(value);" class="accordionContainer" ng-repeat="(key, value) in accordionCtrl.lessons">
<div class="accordionStepBox">
<h4 class="accordionStepTitle">Step {{$index+1}}: {{value.title}}</h4>
<span>Summary: {{value.summary}}</span>
</div>
<div class="accordionCoursesBox">
<div class="accordionCoursesText">Courses</div>
<!-- accordion for suffles -->
<uib-accordion close-others="accordionCtrl.oneAtATime">
<!-- only give accordion to object vals -->
<div class="accordion" ng-show="accordionCtrl.isNotString(value);" ng-repeat="(key, value) in value">
<!-- <uib-accordion-group heading="{{value.title}}" is-open="accordionCtrl.firstIndex($index)"> -->
<uib-accordion-group heading="{{value.title}}">
<div ng-repeat="(key, value) in value">
<div ng-show="accordionCtrl.isNotString(value);" class="accordionSuffleBox">
{{$index+1}}. {{value.title}}
</div>
</div>
<br/>
<button ui-sref="lesson" class="btn btn-default accordionbutton">Start</button>
</uib-accordion-group>
</div>
</uib-accordion>
</div>
</div>
//controller
angular
.module('neuralquestApp')
.controller('AccordionCtrl', AccordionCtrl);
function AccordionCtrl(FirebaseUrl, $firebaseObject, $firebaseArray) {
var accordionCtrl = this;
var getLessons = getLessons;
accordionCtrl.oneAtATime = true;
accordionCtrl.init = init;
accordionCtrl.init();
accordionCtrl.isNotString = isNotString;
accordionCtrl.firstIndex = firstIndex;
/*======================================
= IMPLEMENTATION =
======================================*/
function init() {
getLessons();
}
function firstIndex(index) {
if(index === 0){
return true;
} else {
return false;
}
}
function getLessons() {
var ref = new Firebase(FirebaseUrl);
accordionCtrl.lessons = $firebaseObject(ref.child('NeuralNetwork'));
}
function isNotString(val) {
// console.log('val', val);
if(typeof val === "string"){
console.log('is string', val);
return false;
} else {
return true;
}
}
}
The is-open attribute is setup for 2 way binding with the controller, so you could do something like so:
<div ng-controller="AccordionDemoCtrl">
<uib-accordion>
<div ng-repeat="group in groups">
<uib-accordion-group heading="{{group.title}}" is-open="openIndex[$index]">
{{group.content}}
</uib-accordion-group>
</div>
</uib-accordion>
</div>
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
$scope.openIndex = [true];
$scope.groups = [
{
title: 'Group Header - 1',
content: 'Group Body - 1'
},
{
title: 'Group Header - 2',
content: 'Group Body - 2'
},
{
title: 'Group Header - 3',
content: 'Group Body - 3'
},
{
title: 'Group Header - 4',
content: 'Group Body - 4'
}
];
});
Example plunk. Also, the close-others attribute default value is true, so you don't need to explicitly set that to true.