Check checkboxex based on values fron json using Angularjs - javascript

I have a simple html that loads JSON data into a table using Angularjs ng-repeat. One of the fields come as 1 or zero. I want to write a simple AngularJs directive that will show check-boxes as either checked(1) or not (0); and show text success against (1) and failure against(0) rows.

I'm starting with angular, you can use ng-model inside your ng-repeat and ng-if to display to decode value inside the loop.
Code:
<div ng-controller="Ctrl">
<div ng-repeat="o in obj">{{o.id}}
<input type="checkbox" ng-model="o.checked">
<div ng-if="o.checked == true">success</div>
<div ng-if="o.checked != true">fail!</div>
</div>
</div>
Demo: http://jsfiddle.net/IrvinDominin/G9m4H/

Related

How inject data after every certain count in angularjs

I have some SQL data which I am fetching from the database, I am using angular js with an ng-repeat directive to list all rows below is my code:
<div class="wrapper">
<div class="content" ng-repeat="row in rows">
{{row.someData}}
</div>
</div>
Now I have some custom advertisement banners which I want to show after every 4th row but I don't know how to it with angular Js so please help me here
Apart from Panos K's way what you can do is have one flag to check if banner data is received from web service and then add it after every 4th row of data already loaded. So, for that have ng-if condition inside ng-repeat & then bind that new bannerData arry/objects with index as $index/4.
Check below Plunker example I've created to demonstrate this. Click on Banner data button to make async call to get banner data & then binding it to existing data loaded using ng-repeat
<div ng-repeat="x in records track by $index">
<div class="column">{{x.name}}</div>
<div class="column">{{x.abbreviation}}</div>
<div ng-if="isBannerDataAvailable && ($index+1) % 4 === 0" class="banner">
<p>Banner After every 4th row</p>
<p> {{showBannerData($index)}} </p>
</div>
</div>
Where showBannerData() can be:
$scope.showBannerData = function($index) {
var index = $scope.Math.round(($index + 1) / 4) - 1;
return $scope.bannerData[index].Banner;
}
Working plunker Example
First edit your question with your last comment.
what you need to do is add banners to your model ($scope.rows in your case)
So when you fetch your banners (onSuccess) do this
banners.forEach((element,index)=>{
if(index%4==0)
$scope.rows.splice(index,0,element);
})

How to load controller as per specific condition using Angular.js

I am facing some issue. I have some nested controller within one parent controller and I need it to execute as per some condition using Angular.js. I am explaining my code below.
NABH.html:
<div ng-controller=NABHParentController>
<div ng-show="showNabh">
<div ng-include="'nabh1.html'"></div>
</div>
<div ng-show="showNabh1">
<div ng-include="'nabh2.html'"></div>
</div>
</div>
nabh1.html:
<div class="right_panel" style="display:block;" id="auditnabh" ng-controller="NABHController">
<td class="sticky-cell" ng-click="initiateNABH(nabh.NABHAuditID)">
</td>
</div>
nabh2.html:
<div class="right_panel" ng-controller="NABH2Controller">
<h2 class="page-title">NABH (INT012017001)</h2>
<div>
NABHParentController.js:
var app=angular.module('demo');
app.controller('NABHParentController',function($scope,$http,$state,$window,$location,$filter){
$scope.showNabh=true;
$scope.showNabh1=false;
})
NABHController.js:
var app=angular.module('demo');
app.controller('NABHController',function($scope,$http,$state,$window,$location,$filter,getBothIdToAuditDetailPage)
{
$scope.initiateNABH = function(aid) {
$scope.$parent.$parent.showNabh=false;
$scope.$parent.$parent.showNabh1=true;
}
})
Here Initially all controller are loading and nabh1.html is displaying first. When user will click on that td click event the second part html is showing. Here I need when user will click on that ng-click="initiateNABH(nabh.NABHAuditID)" the second view will open and the resepective controller will start execute. Initially only displaying view related controller will execute. Please help.
It sounds like using ng-if instead of ng-show will solve your problem:
<div ng-if="showNabh">
<div ng-include="'nabh1.html'"></div>
</div>
<div ng-if="showNabh1">
<div ng-include="'nabh2.html'"></div>
</div>
The difference is that while ng-show will "only" hide the element using css when the expression is falsy, ng-if will not create the element if it's falsy and as a result will not initiate the controller until ng-if is truthy.
Also, I would probably move the initiateNABH function to the parent controller - it will still be available in the child controller but makes the code less likely to break since you don't have to use $parent:
var app=angular.module('demo');
app.controller('NABHParentController',function($scope,$http,$state,$window,$location,$filter){
$scope.showNabh=true;
$scope.showNabh1=false;
$scope.initiateNABH = function(aid) {
$scope.showNabh=false;
$scope.showNabh1=true;
}
})

collect multiple data from view - AngularJS

Question
I want to retrieve multiple data from a view and store it into a key:value array in the controller.
HTML
<div ng-repeat="element in elements">
<input type="number" id = "{{element.id}}">
</div>
The array should contain element.id as the key and the value of the input as the value.
I checked angular docs but not found anything helpful to perform this task.
Thanks in advance !

how to get a item inside item in html angular js?

I tried get a value from both dynamic objects in angular js
<div ng-controller="SampleController">
<div> {{item['111']['price']}}
</div>
inside SampleController
$scope.item={111:{price:"232"},112:{price:"233"},115:{price:"237"}};
right now I put item['111']['price'] statically. if when i receive the value dynamically from some where else how to that.
Like,
<div ng-controller="SampleController">
<div> {{item[{{ItemId['id']}}]['price']}}
</div>
$scope.ItemId={id:111};
$scope.item={111:{price:"232"},112:{price:"233"},115:{price:"237"}};
But its returning error. I tried with route scope also.Any one please help out.
Try this:
<div>{{item[ItemId.id].price}}</div>

Angularjs Nested ng-repeat with conditional caluse

Hi i have situation were multiple ng-repeat are nested as
<form ng-repeat="pt in prolist">
Frequency <input type="checkbox" ng-model="pt.req" />
<div ng-repeat="disc in prolist">
------
</div>
</form>
What I am trying to do is something like this
<div ng-repeat="disc in prolist" where pt.id =disc.Pt_id>
Please let me know how to write this line of code in angularjs
Thanks
You would basically turn that "where..." for into a filter pipe: http://docs.angularjs.org/api/ng/filter/filter
E.g., try:
ng-repeat="disc in prolist | filter:{Pt_id: pt.id}" ...
You can filter repeaters in AngularJS.
Try using filter, the following link displays how to use filters with ng-repeat.
ng-repeat with filter
if your data set is huge then do the filtering in javascript and then push the objects to $scope.prolist to render that in view because filters affect the performance badly but for small data sets it is fine.

Categories