i'm getting stuck for change div style when I click another div. I just want to change listAnswer class text-decoration become underline when I click one of ng-repeat div1. I hope someone can help me :( thanks
<style>
.object_screen {
width: 800px;
height: 500px;
}
.div1 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
}
</style>
<div class="object_screen">
<div class="div1" ng-repeat="object in objectList" ng-click="checking(object.name);" ng-style="{'background-image':'url(./img/level/{{ object.image }})}"></div>
</div>
<div class="listAnswer">
<li ng-repeat="object in objectList">{{ object.name }}</li>
</div>
this my angular script
var App = angular.module('App', ['ngRoute']);
App.controller('playController', ['$scope', '$http', function($scope, $http) {
$scope.objectList = [];
$scope.objectList.push({name:'tony', image:'image1.png'});
$scope.objectList.push({name:'Jay', image:'image2.png'});
$scope.objectList.push({name:'Michael', image:'image3.png'});
$scope.checking= function(nameObject){
// change text-decoration to underline for class listAnswer
}
}]);
You may declare a variable in your scope to have a Boolean false initially and change it to true in $scope.checking and have the ng-class as in the succeeding line
div class="listAnswer" ng-class="{ 'your text decoration css class' : watch variable set in the $scope.checking}" your text decoration class will be applied when the variable is set to true
Related
I have the ng-click and ng-if directives on the same div.
Since the click variable is initially set to false the box DIV does not appear. If I set click to true or use !click for ng-if directive, then the box DIV appears but still no animation occurse upon clicking.
If I remove the ng-click from box DIV and add it to another DIV or button to do the toggle, animation works. However, the box DIV is still hidden initially and also disappears after the animation run.
HTML
<div ng-app="animationApp" ng-controller="c1">
<div ng-click="click=!click" ng-if="click" class="box"></div>
</div>
JS
angular.module('animationApp', ['ngAnimate'])
.controller('c1', function ($scope, $animate, $timeout) {
$scope.click = false;
})
;
CSS
.box {
width: 40px;
height: 40px;
background-color: indianred;
}
.box.ng-enter {
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
transform: rotateZ(0deg);
}
.box.ng-enter-active {
transform: rotateZ(-180deg);
}
.box.ng-leave {
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
transform: rotateZ(-180deg);
}
.box.ng-leave-active {
transform: rotateZ(0deg);
}
Demo
https://jsfiddle.net/ae8kwzxg/93/
This line is do nothing: "ng-click="click=!click".
The reason why is not work is because your $scope.click variable is primitive type (bool). It means in this line: ng-click="click=!click" click variable is a copy of your $scope.click variable and you just change the copy but not the actual $scope.click. If you will change your $scope.click variable to object, for example $scope.click = {active:true}
and change your HTML to: <div ng-click="click.active=!click.active" ng-if="click.active" class="box"></div>
It will work.
But better way is always do assignments in function:
<div ng-app="animationApp" ng-controller="c1">
<div ng-click="clicked()" ng-if="click" class="box"></div>
</div>
And your controller will be:
angular.module('animationApp', ['ngAnimate'])
.controller('c1', function ($scope, $animate, $timeout) {
$scope.click = true;
$scope.clicked = function(){
$scope.click = !$scope.click;
}
})
This is working example: https://jsfiddle.net/ae8kwzxg/94/
I have the above page structure . i want to check a conditon to apply style in div with id if the buttonlayout has a class proceed.
<div>
<div id="main">
</div>
<div id='buttonlayout" class="proceed">
</div>
I am displaying the <div id='buttonlayout" class="proceed"></div> based on some conditions. so if the div doesnt exist I dont want to apply sty;e. How can I check this in angular js?
So the logic I am looking for is
if (.div-proceed) exist add an extra style to div (with id main). Is it possible to check in my html page itself (ng-class)?
You can set conditions in ng-class, as sample $scope.proceed default is false our condition is when $scope.proceed is true add class proceed to the element.
This mean if $scope.proceed = false the class not exist, and if it true class is exist.
var app = angular.module("app", []);
app.controller("ctrl", ["$scope", "$filter", function($scope, $filter) {
$scope.change = function() {
$scope.proceed = !$scope.proceed;
}
}]);
body {
padding-top: 50px;
}
a{cursor: pointer}
#buttonlayout {
width: 100px;
height: 100px;
transition: all 0.5s;
background-color: #ccc;
}
#buttonlayout.proceed {
width: 200px;
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<a ng-click="change()">click to remove/add 'proceed' class</a>
<div id="buttonlayout" ng-class="{'proceed': proceed}"></div>
</div>
I would like to show and hide div using Angularjs, but i am new in Angular so need some help Thanks in Advance.
I want to fire event on click of this a tag
<div style="width: 50px; height: 50px; background-color: red;">I want to show this element</div>
<div style="width: 50px; height: 50px; background-color: red;">I want to Hide this element</div>
controller.js:
app.controller('MainCtrl', function($scope) {
$scope.showDiv = '1';
$scope.toggleShow = function(){
$scope.showDiv = !$scope.showDiv;
}
});
HTML:
<body ng-controller="MainCtrl">
I want to fire event on click of this a tag
<div ng-show="showDiv" style="width: 50px; height: 50px; background-color: red;">Show this element</div><br>
<div ng-hide="showDiv" style="width: 50px; height: 50px; background-color: green;">Hide this element</div>
</body>
Here is the Plunker: http://plnkr.co/edit/DWobFzvas9x4lhaoNfTI.
i want my error message div to appear when i click on the submit button and i want that screen should auto scroll to that div my code snippet are below:
CSS:-
.error_msg
{
background: none repeat scroll 0 0 #F16200;
border: 0 solid #FF1055;
color: #EFEFEF;
display: block;
margin-top: 5px;
text-align: center;
width: 41%;
}
HTML of that div:
<div id="error" class="error_msg"> Speed Link Successfuly Created for {{display}}
controller which is invoking on submit:-
tmeModuleApp.controller('speedLinksController',function($scope,APIServices,Paths,$rootScope) {
$scope.setSpeedLink =function() {
var setLink = $('.active').attr('valset_link');
var display = $('.active').attr('valset_display');
var display_name = $('.active').attr('valset_link_name');
if(setLink != '')
{
$location.hash('error');
$scope.display= display_name;
}
}
}
Check out angulars $anchorScroll service.
You should inject $anchorScroll and call it after $locaiton.hash call.
Update
Example
HTML
<div id="scrollArea" ng-controller="ScrollCtrl">
<a ng-click="gotoBottom()">Go to bottom</a>
<a id="bottom"></a> You're at the bottom!
</div>
JS
function ScrollCtrl($scope, $location, $anchorScroll) {
$scope.gotoBottom = function (){
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}
I seem unable to use a controller to set the CSS background property of a div. Here is my code so far, as per the documentation:
HTML:
<div class="hero" ng-controller="HeroCtrl" ng-style="heroImage"></div>
JS:
'use strict';
angular.module('AppliedSiteApp').controller('HeroCtrl', function ($scope) {
$scope.heroImage = {
background: 'images/brick.jpg'
};
console.log($scope.heroImage);
});
CSS:
.hero {
width: 100%;
min-height: 350px;
background-position: center center;
}
I have also tried to replicate this setup in a Fiddle here. Does anyone have any ideas?
$scope.heroImage = {
background: 'url(images/brick.jpg)'
};
background-image requires url() to work.
You need to use css' url() function for background images , like this:
'background-image': 'url(http://i.stack.imgur.com/mfvI9.jpg)'
Plunker: http://plnkr.co/edit/PFUY0w?p=preview
AngularJS now suppoorts ng-style.
So now you can use ng-style="{ backgroundImage: variableInScope + '/some/string' }"