I have an array of data that show in a table, that table is editable, and want the fields are dependent on each other.
How I can do that by changing the percentage of a cell, change the amount for that row and vice versa, when you change the amount, also change the percentage? always verifying not exceeding 100% of the sum of the percentages, and the sum of the amounts not exceeding the total amount.
angular
.module("app", [])
.controller("appController", function ($scope) {
$scope.Data = [
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
}
];
$scope.TotalAmount = 4000.0;
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
</head>
<body ng-app="app">
<div class="container" ng-controller="appController">
Total amount: {{TotalAmount}}
<table class="table table-striped">
<tr><th>Percent</th><th>Value</th></tr>
<tr ng-repeat="invoice in Data">
<td><input type="number" ng-model="invoice.Percent" /></td>
<td><input type="number" ng-model="invoice.Value" /></td>
</tr>
</table>
</div>
</body>
</html>
You can use ng-change for each input(just like #Pravin Erande said in comments).
I have made a SAMPLE FIDDLE for you(without any calculations)
<tr ng-repeat="invoice in Data">
<td><input type="number" ng-model="invoice.Percent" ng-change="valueChanged($index,invoice.Percent,invoice.Value)" /></td>
<td><input type="number" ng-model="invoice.Value" ng-change="valueChanged($index,invoice.Percent,invoice.Value)" /></td>
</tr>
$scope.valueChanged= function(index,precent,value)
{
console.log("Index changed "+index+" percent "+precent+" value "+value);
$scope.Data[index].Percent = 50; // Assign after calculation
$scope.Data[index].Value = 2000; // Assign after calculation
}
You can create a function and pass the $index to that function and update the $scope.Data accordingly after calculation
Add ng-change event on bothinput box
angular
.module("app", [])
.controller("appController", function ($scope) {
$scope.Data = [
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
}
];
$scope.TotalAmount = 4000.0;
$scope.percentChange=function(index,percent){
var remainpercent=(100-percent)/($scope.Data.length-1);
var changerowvalue =$scope.TotalAmount*(percent/100);
$scope.Data[index].Value=changerowvalue;
var remainValue=($scope.TotalAmount-changerowvalue)/($scope.Data.length-1);
for(var i=0;i<$scope.Data.length;i++){
if(i!==index){
$scope.Data[i].Percent=remainpercent;
$scope.Data[i].Value=remainValue;
}
}
};
$scope.valueChange=function(index,value){
$scope.Data[index].Percent=(value*100/$scope.TotalAmount);
var remainValue=($scope.TotalAmount-value)/($scope.Data.length-1);
var remainpercent=(100-$scope.Data[index].Percent)/($scope.Data.length-1);
for(var i=0;i<$scope.Data.length;i++){
if(i!==index){
$scope.Data[i].Percent=remainpercent;
$scope.Data[i].Value=remainpercent;
}
}
};
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
</head>
<body ng-app="app">
<div class="container" ng-controller="appController">
Total amount: {{TotalAmount}}
<table class="table table-striped">
<tr><th>Percent</th><th>Value</th></tr>
<tr ng-repeat="invoice in Data">
<td><input type="number" ng-change="percentChange($index,invoice.Percent)" ng-model="invoice.Percent" /></td>
<td><input type="number" ng-change="valueChange($index,invoice.Percent)" ng-model="invoice.Value" /></td>
</tr>
</table>
</div>
</body>
</html>
I haven't added negative cases like posting value greater than total value or for % more than 100
You can achieve it by calling a single function based on the flag.
See the working example.
angular
.module("app", [])
.controller("appController", function ($scope) {
$scope.Data = [
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
}
];
$scope.TotalAmount = 4000.0;
$scope.changeCalled = function(invoice, flag, index){
var per=0;
var value=0;
if(flag == 'per')
{
value = ($scope.TotalAmount * invoice.Percent)/100;
$scope.Data[index].Value = value;
}
else if(flag == 'val')
{
per = (invoice.Value * 100) / $scope.TotalAmount;
$scope.Data[index].Percent = per;
}
$scope.updateResult(index);
}
$scope.updateResult = function(index, flag){
var remainedPer = 0;
var remainedVal = 0;
remainedPer = (100 - $scope.Data[index].Percent)/ ($scope.Data.length - 1);
remainedInput = ($scope.TotalAmount - $scope.Data[index].Value)/ ($scope.Data.length - 1);
for(i=0; i<$scope.Data.length; i++)
{
if(i != index)
{
$scope.Data[i].Percent = remainedPer;
$scope.Data[i].Value = remainedInput;
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div class="container" ng-controller="appController">
Total amount: {{TotalAmount}}
<table class="table table-striped">
<tr><th>Percent</th><th>Value</th></tr>
<tr ng-repeat="invoice in Data">
<td><input type="number" ng-model="invoice.Percent" ng-change="changeCalled(invoice, 'per', $index)"/></td>
<td><input type="number" ng-model="invoice.Value" ng-change="changeCalled(invoice, 'val' ,$index)" /></td>
</tr>
</table>
</div>
</body>
Thank you all!
I took a bit of everyone's comments, but I think it helped me with my problem was ng-change.
I leave an example of what I needed to do.
Regards!
angular
.module("app", [])
.controller("appController", function ($scope, $filter) {
$scope.Data = [
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
},
{
Percent: 25.0,
Value: 1000.0
}
];
$scope.TotalAmount = 4000.0;
$scope.ValueChanged = function (invoice) {
invoice.Value = (invoice.Value == null || invoice.Value.toString() == ".") ? 0 : invoice.Value;
invoice.Percent = (invoice.Value * 100.0) / $scope.TotalAmount;
CalculateTotals();
ValidateValues();
}
$scope.PercentChanged = function (invoice) {
invoice.Percent = (invoice.Percent == null || invoice.Percent.toString() == ".") ? 0 : invoice.Percent;
invoice.Value = $scope.TotalAmount * (invoice.Percent / 100.0);
CalculateTotals();
ValidateValues();
}
function CalculateTotals() {
var sumPercent = 0;
var sumAmount = 0;
angular.forEach($scope.Data, function (item, index) {
sumPercent += item.Percent;
sumAmount += item.Value;
});
$scope.CalculatedPercent = sumPercent;
$scope.CalculatedAmount = sumAmount;
}
function ValidateValues() {
IsValidAmount();
IsValidPercent();
}
function IsValidPercent() {
if ($scope.CalculatedPercent == 100.0) {
$scope.IsValidPercent = true;
$scope.formInvoices.hdCalculatedPercent.$setValidity('valid', true);
} else {
$scope.IsValidPercent = false;
$scope.formInvoices.hdCalculatedPercent.$setValidity('valid', false);
}
}
function IsValidAmount() {
if ($scope.CalculatedAmount == $scope.TotalAmount) {
$scope.IsValidAmount = true;
$scope.formInvoices.hdCalculatedAmount.$setValidity('valid', true);
} else {
$scope.IsValidAmount = false;
$scope.formInvoices.hdCalculatedAmount.$setValidity('valid', false);
}
}
$scope.CalculatedPercent = 100.0;
$scope.CalculatedAmount = $scope.TotalAmount;
$scope.IsValidPercent = true;
$scope.IsValidAmount = true;
})
.invalidValue{
color: red;
font-weight: bold;
}
.validValue{
color: black;
}
.tableWidth{
width: 500px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app">
<div class="container" ng-controller="appController">
<form role="form" name="formInvoices">
<table class="table table-condensed table-bordered tableWidth">
<tr>
<td class="col-xs-12"><b>Total amount: </b>{{TotalAmount | currency}}</td>
</tr>
</table>
<table class="table table-striped table-condensed table-bordered tableWidth">
<tr>
<th>Percent</th>
<th>Amount</th>
</tr>
<tr ng-repeat="invoice in Data">
<td><input type="number" ng-model="invoice.Percent" ng-change="PercentChanged(invoice)" /> %</td>
<td>$ <input type="number" ng-model="invoice.Value" ng-change="ValueChanged(invoice)" /></td>
</tr>
</table>
<table class="table table-striped table-condensed table-bordered tableWidth">
<tr>
<td class="col-xs-6" ng-class="{'invalidValue': !IsValidPercent,'validValue': IsValidPercent}">{{CalculatedPercent}} %<input name="hdCalculatedPercent" type="hidden" ng-model="CalculatedPercent" /></td>
<td class="col-xs-6" ng-class="{'invalidValue': !IsValidAmount,'validValue': IsValidAmount}">{{CalculatedAmount | currency}}<input name="hdCalculatedAmount" type="hidden" ng-model="CalculatedAmount" /></td>
</tr>
</table>
<input type="submit" ng-disabled="formInvoices.$invalid" value="Save" />
</form>
</div>
</body>
</html>
Below is Logic for your need!.
$scope.Data[index].Percent = value/$scope.TotalAmount * 100;
$scope.Data[index].Value = precent/100 * $scope.TotalAmount;
Related
I'm trying to do strict and progressive search on same fields in 2 different ways. That is when filter through drop down it should to a strict search and through input search it should do a progressive search. I tried to do it using <tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}"> but is giving some error, Its not working.
Please check the bellow code and help me to solve this issue
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<select id="fieldDropdownHtml" ng-model="fieldSelected" ng-options="x.name for x in names" ng-change="searchOnField()">
<option value=""></option>
</select>
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr>
<td><p><input type="text" ng-model="name" ng-disabled="disablese"></p>
<td><p><input type="text" ng-model="country"></p>
</td>
</tr>
<tr ng-repeat="x in names | filter:{name:name||dropdownFieldName, country:country}">
<!--tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}" -->
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.disablese = false;
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Jani1',country:'England'},
{name:'Jani',country:'Norway'}
];
$scope.searchOnField = function() {
var e = document.getElementById("fieldDropdownHtml");
var strUser = e.options[e.selectedIndex].text;
angular.forEach($scope.names, function(dsElement) {
if (dsElement.name === strUser) {
$scope.dropdownFieldName = dsElement.name;
console.log($scope.dropdownFieldName);
}
if(document.getElementById('fieldDropdownHtml').selectedIndex == 0){
$scope.dropdownFieldName= undefined;
}
if(document.getElementById('fieldDropdownHtml').selectedIndex != 0){
$scope.disablese = true;
$scope.name = "";
}
else{
$scope.disablese = false;
}
});
}
});
</script>
</body>
</html>
Additional to Allabakash answer, you can use this code to your controller to make it simpler and minimize vanilla JavaScript codes:
angular
.module('myApp', [])
.controller('namesCtrl', function ($scope) {
$scope.disablese = false;
$scope.names = [
{ name: 'Jani', country: 'Norway' },
{ name: 'Carl', country: 'Sweden' },
{ name: 'Margareth', country: 'England' },
{ name: 'Hege', country: 'Norway' },
{ name: 'Joe', country: 'Denmark' },
{ name: 'Gustav', country: 'Sweden' },
{ name: 'Birgit', country: 'Denmark' },
{ name: 'Jani1', country: 'England' },
{ name: 'Jani', country: 'Norway' }
];
$scope.searchOnField = function () {
if ($scope.fieldSelected) {
$scope.dropdownFieldName = $scope.fieldSelected.name;
$scope.name = null;
$scope.disablese = true;
} else {
$scope.dropdownFieldName = undefined;
$scope.disablese = false;
}
};
});
You can achieve this by separating filters like below.
ng-repeat="x in names | filter:{name:name||dropdownFieldName}: disablese | filter: { country:country }"
Hope this helps.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<select id="fieldDropdownHtml" ng-model="fieldSelected" ng-options="x.name for x in names" ng-change="searchOnField()">
<option value=""></option>
</select>
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr>
<td><p><input type="text" ng-model="name" ng-disabled="disablese"></p>
<td><p><input type="text" ng-model="country"></p>
</td>
</tr>
<tr ng-repeat="x in names | filter:{name:name||dropdownFieldName}: disablese | filter: { country:country }">
<!--tr ng-repeat="x in names | filter:{name:name||dropdownFieldName:true, country:country}" -->
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.disablese = false;
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Jani1',country:'England'},
{name:'Jani',country:'Norway'},
{name:'Jani',country:'Harway'}
];
$scope.searchOnField = function() {
var e = document.getElementById("fieldDropdownHtml");
var strUser = e.options[e.selectedIndex].text;
angular.forEach($scope.names, function(dsElement) {
if (dsElement.name === strUser) {
$scope.dropdownFieldName = dsElement.name;
console.log($scope.dropdownFieldName);
}
if(document.getElementById('fieldDropdownHtml').selectedIndex == 0){
$scope.dropdownFieldName= undefined;
}
if(document.getElementById('fieldDropdownHtml').selectedIndex != 0){
$scope.disablese = true;
$scope.name = "";
}
else{
$scope.disablese = false;
}
});
}
});
</script>
</body>
</html>
Below is snippset,
I want to set the value of balance column based on the entered Amt in Entered Amt column.
I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(d)
{
//How set the value of balace amout by subtrating Amt-Entered Amt.
//I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
</tr>
<tr ng-repeat="x in records">
<td>{{x.Amt}}</td>
<td>{{balance}}</td>
<td><input type="text" ng-model="d" ng-change="value(d)"></td>
</tr>
</table>
</body>
</html>
You can have the balance in your x object.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(d, x)
{
//How set the value of balace amout by subtrating Amt-Entered Amt.
//I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
x.balance = x.Amt - d;
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
</tr>
<tr ng-repeat="x in records">
<td>{{x.Amt}}</td>
<td>{{x.balance}}</td>
<td><input type="text" ng-model="d" ng-change="value(d, x)"></td>
</tr>
</table>
</body>
</html>
Here is updated code
HTML
<div ng-app>
<h2>Todo</h2>
<div>
<table ng-controller="TodoCtrl" border="1">
<tr>
<td>Amt</td>
<td>Balance</td>
<td>Entered Amt</td>
</tr>
<tr ng-repeat="(key,x) in records">
<td>{{x.Amt}}</td>
<td><input type="text" readonly ng-model="balance[$index]"></td>
<td><input type="text" ng-model="d" ng-change="value(x,d,$index)"></td>
</tr>
</table>
</div>
</div>
JS
function myCtrl($scope) {
$scope.balance = {};
$scope.records = [
{
"Amt" : "500",
},
{
"Amt" : "800",
},
{
"Amt" : "1580",
},
{
"Amt" : "1122",
}
]
$scope.value=function(obj,val,key)
{
$scope.balance[key] = parseInt(obj.Amt) - parseInt(val);
//How set the value of balace amout by subtrating Amt-Entered Amt.
//I tried this but in my scenarion, same vallue is setting for all balance column though i make change in only one column
}
}
I 'm working on my AngularFire project. I've a database something like this https://dinosaur-facts.firebaseio.com/. What I'm doing is first searching the key like the dinosaurs child such as "linhenykus" and storing its keys and values to other $scope variable.
my code in controller
var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs" + "/" + $scope.dinoID); //$scope.dinoID is variable containg dino keys
$scope.detRef = $firebaseArray(ref);
I'm getting the output like
[{"$value":-85000000,"$id":"appeared","$priority":null},{"$value":0.6,"$id":"height","$priority":null},{"$value":1,"$id":"length","$priority":null},{"$value":"theropoda","$id":"order","$priority":null},{"$value":-75000000,"$id":"vanished","$priority":null},{"$value":3,"$id":"weight","$priority":null}]
How to fetch the keys and values?
Use ngRepeat directive, as below:
<tr ng-repeat="obj in array track by $index">
To filter the array you can use the filter of Angular:
<tr ng-repeat="obj in array | filter: criteria track by $index">
Here's an example:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$filter'];
function MainCtrl($scope, $filter) {
$scope.criteria = {};
$scope.array = [
{
"$value":-85000000,
"$id":"appeared",
"$priority":null
},
{
"$value":0.6,
"$id":"height",
"$priority":null
},
{
"$value":1,
"$id":"length",
"$priority":null
},
{
"$value":"theropoda",
"$id":"order",
"$priority":null
},
{
"$value":-75000000,
"$id":"vanished",
"$priority":null
},
{
"$value":3,
"$id":"weight",
"$priority":null
}
];
$scope.getObj = function(value, id) {
$scope.obj = $filter('filter')($scope.array, {
"$value": value,
"$id": id
})[0];
}
$scope.getObj("theropoda", "order");
}
})();
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" placeholder="Search by value" ng-model="criteria.$value">
<input type="text" placeholder="Search by id" ng-model="criteria.$id">
<!-- Note that this button is just as an example to change the object displayed below -->
<button type="button" ng-click="getObj()">Change the value of object</button>
<hr>
Obj: <span ng-bind-template="Value: {{obj.$value}}, Id: {{obj.$id}}"></span>
<p></p>
<table width="100%">
<thead>
<tr>
<th>Value</th>
<th>Id</th>
<th>Priority</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in array | filter: criteria track by $index">
<td ng-bind="obj.$value"></td>
<td ng-bind="obj.$id"></td>
<td ng-bind="obj.$priority"></td>
</tr>
</tbody>
</table>
</body>
</html>
Angular javascript array is empty?
I have an array of checkboxes databound to an angular scoped list
I need to check a few checkboxes and send bind them to a second angular scoped array:
My HTML:
<tr ng-repeat="item in pagedItems[currentPage]"
ng-controller="DealerComMaintainCtrl">
<td align="center">
<input type="checkbox" id="{{item.IdArticle}}"
ng-value="item.IdArticle"
ng-checked="selected.indexOf(item.IdArticle) > -1"
ng-click="toggleSelect(item.IdArticle)" />
</td>
<td>
<a href="/Dealercoms/ArticleDownload?FileName={{item.FileName}}&IdArticle={{item.IdArticle}}"
class="btn btn-xs btn-total-red btn-label"><i class="ti ti-download"></i></a>
</td>
<td>{{item.DateArticle | date:'dd/MM/yyyy'}}</td>
<td>{{item.Title}}</td>
<td>{{item.Archive}}</td>
</tr>
And JS in the controller:
$scope.selected = [];
$scope.toggleSelect = function toggleSelect(code) {
var index = $scope.selected.indexOf(code)
if (index == -1) {
$scope.selected.push(code)
} else {
$scope.selected.splice(index, 1)
}
}
$scope.ArchiveDocs = function() {
var selectedoptionz = $scope.selection;
console.log(selectedoptionz);
};
I tried your code and i fixed the problem, by adding the controller on an element above the ng-repeat. The alert is only to check, what is in the selected-array. This is the code, which works fine on my system:
<html>
<head>
</head>
<body ng-app="app">
<table ng-controller="DealerComMaintainCtrl">
<tbody>
<tr ng-repeat="item in pagedItems" >
<td align="center">
<input type="checkbox" id="{{item.IdArticle}}" ng-value="item.IdArticle" ng-checked="selected.indexOf(item.IdArticle) > -1" ng-click="toggleSelect(item.IdArticle)" />
</td>
<td><i class="ti ti-download"></i></td>
<td>{{item.DateArticle | date:'dd/MM/yyyy'}}</td>
<td>{{item.Title}}</td>
<td>{{item.Archive}}</td>
</tr>
</tbody>
</table>
<!-- jQuery -->
<script src="./jquery-2.1.4/jquery.min.js"></script>
<!-- AngularJS -->
<script src="./angular-1.4.5/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller("DealerComMaintainCtrl", function($scope){
$scope.pagedItems = [
{IdArticle: 1, Title: "test1", Archive: "archiv1"},
{IdArticle: 2, Title: "test2", Archive: "archiv1"},
{IdArticle: 3, Title: "test3", Archive: "archiv1"},
{IdArticle: 4, Title: "test4", Archive: "archiv1"}
];
$scope.selected = [];
$scope.toggleSelect = function toggleSelect(code) {
var index = $scope.selected.indexOf(code)
if (index == -1) {
$scope.selected.push(code)
}
else {
$scope.selected.splice(index, 1)
}
alert(JSON.stringify($scope.selected));
}
});
</script>
</body>
</html>
Just try it, i hope it solve your problem...
I have gone through a plunker link given below, which is passing 2 static data from JSON, I want to use ng-repeat and show all the data, and the result should change accordingly.
Plunker Link is : (http://plnkr.co/edit/5WF6FxvwocVBqhuvt4VL?p=preview)
code is given below
<!DOCTYPE html>
<html data-ng-app="App">
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-controller="TestController">
<table id="hotels">
<tr>
<th>Hotel Name</th>
<th>Star Rating</th>
<th>Hotel type</th>
<th>Hotel Price</th>
</tr>
<tr data-ng-repeat="hotel in hotels | filter:search.type1 | filter:search.type2">
<td>{{hotel.name}}</td>
<td>{{hotel.star}}</td>
<td>{{hotel.type}}</td>
<td>{{hotel.price}}</td>
</tr>
</table>
<br/>
<h4>Filters</h4>
<input type="checkbox" data-ng-model='search.type1' data-ng-true-value='luxury' data-ng-false-value='' /> Luxury
<input type="checkbox" data-ng-model='search.type2' data-ng-true-value='double suite' data-ng-false-value='' /> Double suite
</body>
</html>
script is given below
// Code goes here
var iApp = angular.module("App", []);
iApp.controller('TestController', function($scope)
{
$scope.search=[];
$scope.hotels = [
{
name: 'the taj hotel',
star: 5,
type: 'luxury',
price: 5675
},
{
name: 'vivanta Palace',
star: 5,
type: 'luxury',
price: 8670
},
{
name: 'aviary',
star: 4,
type: 'double suite',
price: 3000
},
{
name: 'dummy',
star: 4,
type: 'dummy',
price: 33333100
},
{
name: 'good guest',
star: 3,
type: 'double suite',
price: 3500
},
{
name: 'the ramada',
star: 3,
type: 'luxury',
price: 7500
}
];
});
I think that you want something like this:
PLUNKER
Your HTML:
<table id="hotels">
<tr>
<th>Hotel Name</th>
<th>Star Rating</th>
<th>Hotel type</th>
<th>Hotel Price</th>
</tr>
<tr data-ng-repeat="hotel in hotels | filter:filertHotelTypes">
<td>{{hotel.name}}</td>
<td>{{hotel.star}}</td>
<td>{{hotel.type}}</td>
<td>{{hotel.price}}</td>
</tr>
</table>
<br/>
<h4>Filters</h4>
<label ng-repeat="hotelType in hotelTypes">
<input type="checkbox" value="{{hotelType}}" ng-checked="hotelTypefilter.indexOf(hotelType) > -1" ng-click="toggleSelection(hotelType)">
{{hotelType}}
</label>
Your controller:
$scope.hotelTypefilter=[];
$scope.hotelTypes = ['luxury','double suite','dummy'];
$scope.toggleSelection=function toggleSelection(hotelType) {
var idx = $scope.hotelTypefilter.indexOf(hotelType);
if (idx > -1)
$scope.hotelTypefilter.splice(idx, 1);
else
$scope.hotelTypefilter.push(hotelType);
};
$scope.filertHotelTypes = function(value, index){
return $scope.hotelTypefilter.length==0 || $scope.hotelTypefilter.indexOf(value.type)>-1;
}