How to show or hide a div in a Html, related to a controller, using the variable from a directive.
To show or hide div in html use ng-show:
<div ng-show="myValue"></div>
when myValue is true div element will be visible ,if false then it will hide.
you have to declare that my value in controller that is true or false such as scope.myValue=true;
More details here: Angularjs ng-show
Now passing variable from directive to controller this will help Easiest way to pass an AngularJS scope variable from directive to controller?
In below code I have showed ng-show and ng-hide using both examples using HTML to handle and controller to handle.
In first ng-hide hide the dhaarani name. In controller used to show the dhaarani name using
$scope.hai = false;
inside timeout function
$timeout(countUp, 2000);
Try below code.
var showApp = angular.module('showApp', [])
.controller('mainController', function($scope,$timeout) {
// set the default value of our number
$scope.myNumber = 0;
// function to evaluate if a number is even
$scope.isEven = function(value) {
if (value % 2 == 0)
return true;
else
return false;
};
$scope.timeInMs = 0;
$scope.hai = true;
$scope.welcome = true;
var countUp = function() {
$scope.hai = false;
alert("sgf");
}
$timeout(countUp, 2000);
});
.profilename{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="showApp" ng-controller="mainController">
<div class="page-header text-center">
<h1>ngShow and ngHide: Functions</h1>
</div>
<!-- ANIMALS =========================================================== -->
<div class="row">
<div class="col-xs-4">
<form>
<div class="form-group">
<label>Type a Number</label>
<input type="text" class="form-control" ng-model="myNumber">
</div>
</form>
</div>
<div class="col-xs-8 jumbotron text-center">
<!-- show if our function evaluates to false -->
<div ng-show="isEven(myNumber)">
<h2>The number is even.</h2>
</div>
<!-- show if our function evaluates to false -->
<div ng-show="!isEven(myNumber)">
<h2>The number is odd.</h2>
</div>
</div>
</div>
<div class="page-header text-center">
<h1>ngShow and ngHide: using controller</h1>
</div>
<p ng-show="welcome">welcome</p>
<p ng-hide="hai" class="profilename">Dhaarani</p>
</div>
I am using same divs in my view but inside of divs are changing.So I want to make it in a directive. What is the way for this?
Example;
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
<label....>
</div>
</div>
</div>
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
<select....>
</div>
</div>
</div>
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
<textArea....>
</div>
</div>
</div>
So i want to make this part as a directive ;
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
</div>
</div>
</div>
Can you help ?
Use this:
<my-wrapper>
Your content here
</my-wrapper>
And script (UPDATED: Load html file instead inline html):
module.directive('myWrapper', function ($http, $compile) {
var linker = function (scope, element, attrs) {
$http.get('wrapper.html').success(function (data) {
element.replaceWith($compile(data)(scope));
});
};
return {
restrict: 'E',
link: linker
};
});
JSFiddle
I am newbie to angular. I have two scope variables i.e,$scope.jsonData and $scope.dbdatas. I want to show value from $scope.jsonData corresponding to $scope.dbdatas.name. Please check my code. I have mentioned my desire output in the code.
View:
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="dbdata in dbdatas">
<div>
{{dbdata.name}} : <span class="list_text">{{dbdata.value}}</span>
<!--something like {{dbdata.name}} : <span show-value class="list_text">{{dbdata.value}}</span>-->
</div>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope){
$scope.jsonData=[{"_id":"56f90a9a51ec8f20e786a9e7","name":"Eleget","options":[{"key":"Y","value":"Once"},{"key":"M","value":"More than once"}]},{"_id":"56f90a9a51fs8f20e786a9e7","name":"MoliRet","options":[{"key":"L","value":"Let"},{"key":"R","value":"Ret"}]}];
$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
});
/*app.directive('showValue',function(){
return{
restrict:'A',
link:function(scope,ele,attr){
}
}
});*/
Current Output
MoliRet : L
MoliRet : R
Eleget : M
Desire Output
MoliRet: Let
MoliRet: Ret
Eleget: More than once
Working Fiddle
HTML:
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="item in jsonData">
<div ng-repeat='option in item.options'>
<div ng-show="isInArray(option.key)">
{{item.name}}: {{option.value}}
</div>
</div>
</div>
</div>
</div>
JavaScript:
var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope){
$scope.isInArray = function(key){
var returnValue = false;
for(var i=0;i<$scope.dbdatas.length;i++){
if($scope.dbdatas[i].value==key){
returnValue = true;
break;
}
}
return returnValue
}
$scope.jsonData=[{"_id":"56f90a9a51ec8f20e786a9e7","name":"Eleget","options":[{"key":"Y","value":"Once"},{"key":"M","value":"More than once"}]},{"_id":"56f90a9a51fs8f20e786a9e7","name":"MoliRet","options":[{"key":"L","value":"Let"},{"key":"R","value":"Ret"}]}];
$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
});
Output:
Eleget: More than once
MoliRet: Let
MoliRet: Ret
Hope that solve your problem.
You can use angular.ForEach to match data from both scope variables and push the data to an array $scope. Please take a look at the solution below.
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<div class="col-md-4 col-lg-4 col-xs-6" style="padding: 10px" ng-repeat="dbdata in dbdatas">
<div>
{{dbdata.name}} : <span class="list_text">{{dbdata.value}}</span>
</div>
</div>
<div ng-repeat="expect1 in expectations">{{expect1.name}}: {{expect1.value}}</div>
</div>
</div>
$scope.dbdatas=[{name:'MoliRet',value:'L'},{name:'MoliRet',value:'R'},{name:'Eleget',value:'M'}];
$scope.expectations= [];
angular.forEach($scope.dbdatas,function(value1){
angular.forEach($scope.jsonData,function(value2){
if(value1.name == value2.name){
angular.forEach(value2.options,function(value3){
if(value3.key == value1.value){
$scope.expectations.push({
"name" : value2.name,
"value": value3.value});
}
});
}
});
});
Expected output will be
MoliRet: Let
MoliRet: Ret
Eleget: More than once
I would suggest you have to store a unique options table in one json and use angular custom service filter to handle the relative key 'look at the plunker'. you can use this custom filter in any controller and view.
Here is custom filter
app.filter('myFilter', ['$filter', function ($filter) {
return function (data, param) {
var output = $filter('filter')(data, {key:param},true);
return (param && output.length) ? output[0].value : '';
};
}]);
Here is a working plunker
.Hope that help.
I have 2 popup's which is controller by a service in a page. on click on the div element i am calling the controller function. after i added the 2nd popup directive especially some times the ng-click not working properly. how to solve this?
here is my service.js
"use strict";
angular.module("tcpApp").service("modalService", function ( $rootScope) {
//header configuration
$rootScope.hideModal = function() {
$rootScope.showModal = false;
};
this.changePass = function ( configId ) {
$rootScope.showModal = true; //this is for global
$rootScope.currentConfigPopView = 'views/tools/'+configId+'.html';
$rootScope.$apply();
};
this.showSummary = function () {
this.showSummaryPop = true;
}
this.hideSummary = function () {
this.showSummaryPop = false; //this is within controller
}
});
html:
<div class="statusBoard board8" ng-click='modal.showSummary("board8")'>
<span><img src="../images/iconDetails.png" alt="icon plan and actual"></span>
<h2>{{boardAssets.board8.title}}</h2>
<span class="row dwo">
<span class="catg">Total Issue Reported</span>
<span class="cd issueData">{{contractor.IssueDetails.TotalIssue}}</span>
</span>
<span class="row mas">
<span class="catg">Issue Resolved</span>
<span class="cd resolveData">{{contractor.IssueDetails.IssueResolved}}</span>
</span>
<span class="row rfi">
<span class="catg">Issue Remaining</span>
<span class="cd remainData">{{contractor.IssueDetails.IssueRemaining}}</span>
</span>
</div>
<body-footer></body-footer>
<config-popup></config-popup> //after i added this directive getting ng-click issue.
<modal-popup></modal-popup>
config popup html:
<div class='ng-modal' ng-if="showModal">
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-dialog-content'>
<ng-include src="currentConfigPopView"></ng-include>
</div>
</div>
</div>
I have an array of objects that I need to loop output on but am getting stuck. I tried using jQuery's .each() without success.
render: function() {
return (
$.each(events, function(k, e) {
<div className="event-item-wrap">
<div className="event-item" style="backgroundImage:e.Image">
<div className="event-item-date">e.Date</div>
<div className="event-item-title">e.Title</div>
<div className="event-item-price">e.Price</div>
<div className="event-item-bottom">
<div className="event-item-tags">
<ul>
<li>#professional</li>
<li>#livejazz</li>
<li>#courtet</li>
</ul>
</div>
</div>
</div>
</div>
});
);
}
My array contains simple Javascript objects with keys and values. How can I render them in React?
Here is a example of how looping is usually done in Reactjs
var List = React.createClass({
render: function() {
return (
{ this.props.data.map(function(e) {
var eventStyle = {
backgroundImage:e.Image
};
return (
<div className="event-item-wrap">
<div className="event-item"style="{eventStyle}">
<div className="event-item-date">{e.Date}</div>
<div className="event-item-title">{e.Title}</div>
<div className="event-item-price">{e.Price}</div>
<div className="event-item-bottom">
<div className="event-item-tags">
<ul>
<li>#professional</li>
<li>#livejazz</li>
<li>#courtet</li>
</ul>
</div>
</div>
</div>
</div>
)
})
}
);
}
});
React.render(<List data={ (Array goes here) } />, document.body);
I totally agree with Dominic Tobias answer about, forgetting about jQuery, since we won't be manipulating the dom nor do we need to. For all other helpers use native functions or _. or give (es6 a shot) but in addition to the answer given by eugene safronov. I would like to recommend not to create the loop within the return itself, for readability and also for flexibility purposes. See example and the example below.
var List = React.createClass({
render: function () {
var eventItems = this.props.data.map(function (item) {
var itemStyle = {
backgroundImage:item.Image
};
return (
<div className="event-item-wrap">
<div className="event-item"style="{itemStyle }">
<div className="event-item-date">{item.Date}</div>
<div className="event-item-title">{item.Title}</div>
<div className="event-item-price">{item.Price}</div>
<div className="event-item-bottom">
<div className="event-item-tags">
<ul>
<li>#professional</li>
<li>#livejazz</li>
<li>#courtet</li>
</ul>
</div>
</div>
</div>
</div>
);
});
return (
<div className="app">
{ eventItems }
</div>
);
}
});
React.render(<List data={ (itemsArray) } />, document.body);
-- example with no data --
var List = React.createClass({
render: function () {
var eventItems;
if(_.isEmpty(this.props.data)) { // i used lodash/underscore _. for this example)
eventItems = (
<span>No items to display</span>
);
} else {
eventItems = this.props.data.map(function (item) {
var itemStyle = {
backgroundImage:item.Image
};
return (
<div className="event-item-wrap">
<div className="event-item"style="{itemStyle }">
<div className="event-item-date">{item.Date}</div>
<div className="event-item-title">{item.Title}</div>
<div className="event-item-price">{item.Price}</div>
<div className="event-item-bottom">
<div className="event-item-tags">
<ul>
<li>#professional</li>
<li>#livejazz</li>
<li>#courtet</li>
</ul>
</div>
</div>
</div>
</div>
);
});
}
return (
<div className="app">
{ eventItems }
</div>
);
}
});
React.render(<List data={ (itemsArray) } />, document.body);
it adds some extra flexibility, and readibility. I hope this helps u a bit, success with ReactJs!
(update: btw, now i used _. to check if data was empty, but u could also have checked if map returned nothing, and then show the different content, saves 1 extra function :D)