Develop Reference

Uncheck all checkboxes based on another checkbox using Angularjs

I am trying to figure out that if the user checks N/A all the other boxes are unchecked (if they are checked). Below is what i have working, but I am not sure on how to uncheck those boxes and set them to false Any help is greatly appreciated.
var app = angular.module('MyApp', []);
app.controller('MyAppController', ['$scope',
function($scope) {
$scope.appliances = [{
Name: 'N/A'
},
{
Name: 'Computer',
ExcludedBy: 'N/A'
},
{
Name: 'TV',
ExcludedBy: 'N/A'
},
{
Name: 'Voice Assistant',
ExcludedBy: 'N/A'
}
];
$scope.myObj = {};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="app in appliances">
<input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]"> {{ app.Name }}
</div>
</div>
</div>

You can use a ng-change to trigger a function to change the underlying content.
var app = angular.module('MyApp', []);
app.controller('MyAppController',['$scope',
function($scope) {
$scope.appliances = [
{
Name: 'N/A'
},
{
Name: 'Computer',
ExcludedBy: 'N/A'
},
{
Name: 'TV',
ExcludedBy: 'N/A'
},
{
Name: 'Voice Assistant',
ExcludedBy: 'N/A'
}
];
$scope.myObj = {};
$scope.checkForNA = function () {
if ($scope.myObj[$scope.appliances[0].Name]) {
$scope.myObj = {};
$scope.myObj[$scope.appliances[0].Name] = true;
}
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="app in appliances">
<input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="checkForNA()">
{{ app.Name }}
</div>
</div>
</div>

Something like this
var app = angular.module('MyApp', []);
app.controller('MyAppController',['$scope',
function($scope) {
$scope.appliances = [
{
Name: 'N/A'
},
{
Name: 'Computer',
ExcludedBy: 'N/A',
IsSelected: false,
IsDisabled: false
},
{
Name: 'TV',
ExcludedBy: 'N/A',
IsSelected: false,
IsDisabled: false
},
{
Name: 'Voice Assistant',
ExcludedBy: 'N/A',
IsSelected: false,
IsDisabled: false
}
];
$scope.myObj = {};
$scope.checkAll = function(name, isSelected){
if(name === 'N/A'){
for(var i =0; i< $scope.appliances.length; i++){
if($scope.appliances[i].Name != name && $scope.appliances[i].ExcludedBy===name){
$scope.appliances[i].IsSelected = false;
$scope.appliances[i].IsDisabled = !isSelected;
}
}
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="app in appliances">
<input type="checkbox" ng-disabled="app.IsDisabled" ng-click="checkAll(app.Name, app.IsSelected)" ng-model="app.IsSelected">
{{ app.Name}}
</div>
</div>
</div>

In this case, DavidX's answer is correct. However, we can improve the way of verifying through the existence of the ExcludedBy attribute in a generic way using Array#find().
No necessarily, the first element of the array $scope.appliances will be N/A item.
var naItem = $scope.appliances.find(function(x) {
return x.ExcludedBy === undefined;
});
For this example I'm using the ng-change directive.
Something like this:
First example:
var app = angular.module('MyApp', []);
app.controller('MyAppController', ['$scope',
function($scope) {
$scope.appliances = [{
Name: 'N/A'
},
{
Name: 'Computer',
ExcludedBy: 'N/A'
},
{
Name: 'TV',
ExcludedBy: 'N/A'
},
{
Name: 'Voice Assistant',
ExcludedBy: 'N/A'
}
];
$scope.myObj = {};
$scope.check = function() {
var naItem = $scope.appliances.find(function(x) {
return x.ExcludedBy === undefined;
});
if ($scope.myObj[naItem.Name]) {
$scope.myObj = {};
$scope.myObj[naItem.Name] = true;
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="app in appliances">
<input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="check()"> {{ app.Name }}
</div>
</div>
</div>
Second example:
var app = angular.module('MyApp', []);
app.controller('MyAppController', ['$scope',
function($scope) {
$scope.appliances = [{
Name: 'Computer',
ExcludedBy: 'N/A'
},
{
Name: 'TV',
ExcludedBy: 'N/A'
},
{
Name: 'Voice Assistant',
ExcludedBy: 'N/A'
},
{
Name: 'N/A'
}
];
$scope.myObj = {};
$scope.check = function() {
var naItem = $scope.appliances.find(function(x) {
return x.ExcludedBy === undefined;
});
if ($scope.myObj[naItem.Name]) {
$scope.myObj = {};
$scope.myObj[naItem.Name] = true;
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyAppController">
<div ng-repeat="app in appliances">
<input type="checkbox" value="{{ app.Name }}" ng-model="myObj[app.Name]" ng-disabled="myObj[app.ExcludedBy]" ng-change="check()"> {{ app.Name }}
</div>
</div>
</div>

Order and Groupd Data By Year and Month

I am trying to show a list of payments made for a particular product. So, if i purchased a product for $2000, i would could set up a monthly payment of $100 and i want to try and track if that payment is made or not.
I have a nested ng-repeat. The first repeat displays a list of products as well as an associated id. For example:
Bed frame | ID: po8j3mau72
Television | ID: hyf53ygt65
Fridge | ID: gytf87hg5d
The second repeat displays the monthly payment made.
What i want to try and show is something like this:
Bedframe:
Jan Feb Mar Apr May Jun.....
2016 Y Y Y N Y N
2015 Y N
...
...
Television:
Jan Feb Mar Apr May Jun.....
2016 Y N Y N Y N
2015 Y Y Y Y Y Y
...
...
Where Y = contentHistory.paid = true
Where N = contentHistory.paid = false
Dates should be sorted from Jan - Dec for each year and format recieved in .JSON is paymentDate":"2016-03-28T00:00:00.000Z",
HTML:
<ul>
<li ng-repeat-start="item in myItem.items">
{{item.addressLine1}} | ID: {{item._id}}
</li>
<li ng-repeat-end>
<div ng-repeat="info in contents[item._id].contentHistory">
{{info.amount}}
</div>
</li>
</ul>
Controller:
app.controller('MainCtrl', function($scope, myService) {
$scope.test = 'hello';
myService.getItemModel(function(itemModel) {
$scope.myItem = itemModel;
$scope.contents = {};
var itemList = itemModel.items;
itemList.forEach(function(item) {
var addressId = item._id;
myService.getContentModel(addressId)
.success(function (data, status, headers, config) {
$scope.contents[addressId] = data;
console.log(arguments);
console.log($scope.contents);
})
.error(function (data, status, headers, config) {
});
});
});
});
Service:
app.factory('myService', function($http, $q) {
return {
getItemModel: function(itemModel) {
$http.get('itemID.json')
.success(function(data) {
itemModel(data);
})
.error(function(error) {
alert('An error occured whilst trying to retrieve your item data');
});
},
getContentModel: function(addressId) {
return $http({
method: 'GET',
url: addressId + '.json',
headers: {'Content-Type': 'application/json'}
});
}
}
});
Plunker: https://plnkr.co/edit/KIMScMfUdgCdOKksVyAs

just implemented this.modified your markup a little.and added new properties Year and Month to content history item.check this plunker
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, myService) {
$scope.test = 'hello';
myService.getItemModel(function(itemModel) {
$scope.myItem = itemModel;
$scope.contents = {};
var itemList = itemModel.items;
itemList.forEach(function(item) {
var addressId = item._id;
myService.getContentModel(addressId)
.success(function(data, status, headers, config) {
angular.forEach(data.contentHistory, function(v) {
v.paymentDate = new Date(v.paymentDate);
v.Year = v.paymentDate.getFullYear();
v.Month = v.paymentDate.getMonth();
});
$scope.contents[addressId] = data;
})
.error(function(data, status, headers, config) {
});
});
});
$scope.months = [{
n: 0,
name: 'Jan'
}, {
n: 1,
name: 'Feb'
}, {
n: 2,
name: 'Mar'
}, {
n: 3,
name: 'Apr'
}, {
n: 4,
name: 'May'
}, {
n: 5,
name: 'Jun'
}, {
n: 6,
name: 'Jul'
}, {
n: 7,
name: 'Aug'
}, {
n: 8,
name: 'Sep'
}, {
n: 9,
name: 'Oct'
}, {
n: 10,
name: 'Nov'
}, {
n: 11,
name: 'Dec'
}];
$scope.getData = function(data, year, month) {
var rd = data.filter(function(d) {
return d.Year == year && d.Month == month
});
if (rd.length > 0)
return rd[0].amount;
return 'x';
};
$scope.getUniqueYears = function(data) {
var years = [];
angular.forEach(data, function(v) {
if (years.indexOf(v.Year) == -1) {
years.push(v.Year);
}
});
return years;
};
});
app.factory('myService', function($http, $q) {
return {
getItemModel: function(itemModel) {
$http.get('itemID.json')
.success(function(data) {
itemModel(data);
})
.error(function(error) {
alert('An error occured whilst trying to retrieve your item data');
});
},
getContentModel: function(addressId) {
return $http({
method: 'GET',
url: addressId + '.json',
headers: {
'Content-Type': 'application/json'
}
});
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>{{test}}!</p>
<div>
<h4 ng-repeat-start="item in myItem.items">
{{item.addressLine1}} | ID: {{item._id}}
</h4>
<div ng-repeat-end>
<table>
<tr>
<td>Year</td>
<td ng-repeat="month in months">
{{month.name}}
</td>
</tr>
<tr ng-repeat="year in getUniqueYears(contents[item._id].contentHistory)">
<td>{{year}}</td>
<td ng-repeat="month in months">
{{getData(contents[item._id].contentHistory,year,month.n)}}
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

My viewmodel does not reflect my selections

I'm using cascading dowpdowns in a list.
The user interface is working fine, but the underlying viewmodel is not up to date with the user selections.
I have the following html :
<ul data-bind="foreach: selectedExams">
<li>
<select data-bind="options: $parent.availableExams, optionsCaption: 'Choisir un type...', optionsText: 'examTypeName', value: examtype"></select>
<select data-bind="options: exams, optionsCaption: 'Choisir un examen...' , optionsText: 'examName',value: exam, enable:exams().length"></select>
Remove
</li>
</ul>
<button data-bind="click: add">Add</button>
<pre data-bind="text: ko.toJSON($root.selectedExams, null, 2)"></pre>
js file:
function AppViewModel() {
var self = this;
self.availableExams = [
{
examTypeId: "SCAN", examTypeName: "Scanner", exams: [
{ examId: "SCOEUR", examName: "SCOEUR" },
{ examId: "SANGIO", examName: "SANGIO abdominopelvien" },
{ examId: "SSINUS", examName: "SSINUS sans inj" }
]
},
{
examTypeId: "RX", examTypeName: "Radio", exams: [
{ examId: "RBRAS", examName: "RBRAS" },
{ examId: "RAVBRAS", examName: "RAVBRAS" },
{ examId: "RBASSIN", examName: "RBASSIN 1 inc + rx bilat COXO FEMO 1/2 inc" }
]
},
{
examTypeId: "IRM", examTypeName: "IRM", exams: [
{ examId: "ITETE", examTypeId: "IRM", examName: "ITETE angio IRM enceph" },
{ examId: "IRACHIS", examTypeId: "IRM", examName: "IRACHIS 1/2 segt avec INJ" },
{ examId: "ITHORAX", examTypeId: "IRM", examName: "ITHORAX sans inj" }
]
}
];
self.selectedExams = ko.observableArray([new selectedExam()]);
self.add = function () {
self.selectedExams.push(new selectedExam());
};
self.remove = function (exam) { self.selectedExams.remove(exam) }
}
var selectedExam = function () {
self.examtype = ko.observable(undefined);
self.exam = ko.observable(undefined);
self.exams = ko.computed(function () {
if (self.examtype() == undefined || self.examtype().exams == undefined)
return [];
return self.examtype().exams;
});
}
ko.applyBindings(new AppViewModel());
The result, for 3 lines of various selections is the following :
[
{},
{},
{}
]
I'm expecting to see this for instance :
[
{"SCAN","SCOEUR"},
{"RX", "RBRAS"},
{"IRM", "ITETE"}
]
This is probably a data binding issue, but I don't know where to start to debug this kind of problem.
Please note that I'm using this code in a bootstrap grid.
Any Help appreciated.
Thanks in advance.

The problem is that you're missing the definition of self in your selectedExam constructor function. Currently, your self is actually referencing window (the global context) hence you're ending-up with empty objects being returned.
Try this:
var selectedExam = function () {
var self = this; // <-- add this
self.examtype = ko.observable(undefined);
self.exam = ko.observable(undefined);
self.exams = ko.computed(function () {
if (self.examtype() == undefined || self.examtype().exams == undefined)
return [];
return self.examtype().exams;
});
}

selectable table modal popup in angular js

I am trying to open a modal popup with table. How can I do this? In my app.js, on the click event of row open a modal, I also want to update some field with the selected item value. But i can't update with selected value.
my app.js
var tableApp = angular.module('tableApp', ['ui.bootstrap']);
tableApp.controller('tableController', function ($scope,$rootScope, $filter, $modal) {
$scope.filteredPeople = [];
$scope.currentPage = 1;
$scope.pageSize = 10;
$scope.people = [{ id: "1", name: "joe",disable:true },
{ id: "2", name: "bill", disable: true },
{ id: "3", name: "john", disable: true },
{ id: "1", name: "joe", disable: true },
{ id: "2", name: "bill", disable: true },
{ id: "3", name: "john", disable: true },
{ id: "1", name: "joe", disable: true },
{ id: "2", name: "bill", disable: true },
{ id: "3", name: "john", disable: true },
{ id: "1", name: "joe", disable: true },
{ id: "2", name: "bill", disable: true },
{ id: "3", name: "john", disable: true },
{ id: "1", name: "joe" },
{ id: "2", name: "bill", disable: true },
{ id: "3", name: "john", disable: true }];
$scope.getPage = function () {
var begin = (($scope.currentPage - 1) * $scope.pageSize);
var end = begin + $scope.pageSize;
$scope.filteredPeople = $filter('filter')($scope.people, {
id: $scope.idFilter,
name: $scope.nameFilter
});
$scope.totalItems = $scope.filteredPeople.length;
$scope.filteredPeople = $scope.filteredPeople.slice(begin, end);
};
$scope.getPage();
$scope.pageChanged = function () {
$scope.getPage();
};
$scope.open = function () {
$scope.id = generateUUID();
};
$scope.dblclick = function (index) {
for (var i = 0; i < $scope.filteredPeople.length; i++) {
$scope.filteredPeople[i].disable = true;
}
return index.disable = false;
}
$scope.rowSelect = function (rowdata) {
alert(rowdata.name);
}
});
tableApp.controller('DetailModalController', [
'$scope', '$modalInstance', 'item',
function ($scope, $modalInstance, item) {
$scope.item = item;
$scope.dismiss = function () {
$modalInstance.dismiss();
};
$scope.close = function () {
$modalInstance.close($scope.item);
};
}]);
tableApp.directive('myModal', function ($log, $compile) {
var parm = [];
return {
restrict: 'E',
templateUrl: 'modalBase.html',
scope: {
modal: '=',
idF:'='
},
link: function (scope, element, attrs) {
debugger;
parm.name = attrs.idf;
}
//controller: function ($scope) {
// debugger;
// console.log($scope);
// $scope.selected = {
// item: $scope.modal.items[0]
// };
// $scope.ok = function () {
// debugger;
// alert(parm.name);
// $scope.modal.instance.close($scope.selected);
// };
// $scope.cancel = function () {
// $scope.modal.instance.dismiss('cancel');
// };
// $scope.modal.instance.result.then(function (selectedItem) {
// $scope.selected = selectedItem;
// }, function () {
// $log.info('Modal dismissed at: ' + new Date());
// });
//}
};
});

As I understand, you use angular.ui. I would suggesst you to use $modal service instead of $modalInstance. Using that you can call your modal instance with $modal.open(). And also you don't need to close it in your controller - place appropriate methods on your modal template and it will work by its services
Template:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$close()">OK</button>
<button class="btn btn-warning" type="button" ng-click="$dismiss('cancel')">Cancel</button>
</div>
</script>
Controlelr
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
You can find more info about it in angular.ui documentation for modals

How to get data from two services with an ID and display the content

In PHP you could say SELECT "message" FROM "users" WHERE id = $id But how do can I select in AngularJS (JavaScript) like the PHP way.
Here are my services at the moment:
app.service("users", function() {
this.userList = [
{
userId: 1,
username: "John",
password: "Doe"
},
{
userId: 2,
username: "Jane",
password: "Doe"
}
];
this.text = function() {
return "Hello";
};
});
app.service("userMessages", function() {
this.messages = [
{
userId: 1,
message: [
{
text: "This is a message from user 1"
},
{
text: "This is another message from user 1"
}
]
},
{
userId: 2,
message: [
{
text: "This is a message from user 2"
},
{
text: "This is another message from user 2"
}
]
}
]
});
And my controller is like this:
app.controller("controller", function($scope, users, userMessages) {
$scope.users = users.userList;
var id = $scope.users.length
$scope.add = function() {
$scope.users.push(
{
userId: ++id,
username: $scope.username,
password: $scope.password
}
);
$scope.username = "";
$scope.password = "";
};
});
And here is the HTML:
<div class="container" ng-controller="controller">
<div ng-repeat="user in users">
{{ user.userId }}<br />
{{ user.username }}<br />
{{ user.password }}<br />
<hr />
</div>
<input type="text" ng-model="username" placeholder="Username"><br />
<input type="text" ng-model="password" placeholder="Password"><br />
<button ng-click="add()">Add user</button>
</div>
This is a simple test that I made to see how I could display the messages from the userMessages service and link them to the users in the users service.
I have no idea how to do this.
I have done some research but I could not find a solution. Any help would be appreciated.

You can use ng-if to compare the users.userId and messages.userId and display them according to the user
Here is the working plunker
http://embed.plnkr.co/39Dd6AtKorcxX24fNmJF/preview
Hope this helps!!!!

Here's some data to show you how you can use javascripts Array.prototype.filter to grab data from arrays based on a parameter.
angular.module('app', [])
.service('users', function() {
this.userList = [{
userId: 1,
username: "John",
password: "Doe"
}, {
userId: 2,
username: "Jane",
password: "Doe"
}];
this.text = function() {
return "Hello";
};
})
.service('userMessages', function() {
var messages = [{
userId: 1,
messages: [{
text: "This is a message from user 1"
}, {
text: "This is another message from user 1"
}]
}, {
userId: 2,
messages: [{
text: "This is a message from user 2"
}, {
text: "This is another message from user 2"
}]
}];
this.getUsersMessages = function(id) {
return messages.filter(function(obj, i) {
return obj.userId == id;
});
}
})
.controller('testCtrl', ['$scope', 'users', 'userMessages',
function($scope, users, userMessages) {
$scope.user1 = users.userList[0];
$scope.user2 = users.userList[1];
$scope.user1Messages = userMessages.getUsersMessages($scope.user1.userId);
$scope.user2Messages = userMessages.getUsersMessages($scope.user2.userId);
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
{{user1Messages}}
<br />
{{user2Messages}}
</div>
</body>
</html>

SELECT * FROM * WHERE has nothing to do with PHP, it's SQL language of a database, like MySQL.
When you want to make queries to javascript array consider using methods of javascript array.