setting items disable on uncheck all - angularjs

I am using a bootstrap-multiselect and same options on textbox
<label>Options:</label>
<div ng-model="val.options" ng-dropdown-multiselect="" options="array" extra-settings="settings2" events="events"> </div>
<label>Codes:</label>
<label>A:</label>
<input type="text" ng-model="val.A" ng-disabled="aDisable">
<label>B:</label>
<input type="text" ng-model="val.B" ng-disabled="bDisable">
<label>C:</label>
<input type="text" ng-model="val.C" ng-disabled="cDisable">
<label>D:</label>
<input type="text" ng-model="val.D" ng-disabled="dDisable">
<label>E:</label>
<input type="text" ng-model="val.E" ng-disabled="eDisable">
</div>
Directive code:-
(function () {
'use strict';
angular.module('myApp.components')
.directive('options', options);
options.$inject = ['$http' , '$timeout];
function branch($http, $timeout) {
return {
restrict: 'EA',
scope: {
},
controller: function ($scope) {
$scope.disable = function(){
$scope.aDisable = true;
$scope.bDisable = true;
$scope.cDisable = true;
$scope.dDisable = true;
$scope.eDisable = true;
};
$scope.disable();
$scope.array = [{
name: "A"
}, {
name: "B"
}, {
name: "C"
}, {
name: "D"
}, {
name: "E"
}];
$scope.settings = {
smartButtonMaxItems: 11,
scrollable: true,
displayProp: "name",
idProp: "name",
externalIdProp: "name"
};
$scope.settings2 = {
smartButtonMaxItems: 7,
scrollable: true,
displayProp: "name",
idProp: "name",
externalIdProp: "name",
};
$scope.enabling = function(e){
switch(e) {
case 'A': $scope.aDisable = false;
break;
case 'B': $scope.bDisable = false;
break;
case 'C': $scope.cDisable = false;
break;
case 'D': $scope.dDisable = false;
break;
case 'E': $scope.eDisable = false;
break;
}
};
$scope.events = {
onItemSelect: function(item){
switch(item.name) {
case 'A': $scope.aDisable = false;
break;
case 'B': $scope.bDisable = false;
break;
case 'C': $scope.cDisable = false;
break;
case 'D': $scope.dDisable = false;
break;
case 'E': $scope.eDisable = false;
break;
}
},
onItemDeselect: function(item){
switch(item.name) {
case 'A': $scope.aDisable = true;
break;
case 'B': $scope.bDisable = true;
break;
case 'C': $scope.cDisable = true;
break;
case 'D': $scope.dDisable = true;
break;
case 'E': $scope.eDisable = true;
break;
}
}
};
}
},
templateUrl: ''
};
}
})();
The issue I am facing here is when I click 'check all' all the textboxes are getting enabled but when I click on 'uncheck all' they are not disabling back. What should I do here?

Related

how to use If condition in ionic popup

i created one common Popup screen its used in three module but three module have different title. I didn't give if condition in title, Is possible or not anybody give solution to me.
popup code here :
function showPopup () {
$scope.data = {};
var myPopup = $ionicPopup.show({
template: '<input focus-me type="text" ng-model="data.expensetype" limit-char limit="15">',
if (vm.usertype === 'Worker') {
title: $translate.instant('{{"wtype_message" | translate}}'),
}
else if (vm.usertype === 'Buyer') {
title: $translate.instant('{{"btype_message" | translate}}'),
}
else if (vm.usertype === 'Expense') {
title: $translate.instant('{{"etype_message" | translate}}'),
}
scope: $scope,
buttons: [
{ text: $translate.instant('{{"pcancel_message" | translate}}') },
{
text: $translate.instant('{{"psave_message" | translate}}'),
type: 'button-positive',
onTap: function (e) {
if (!$scope.data.expensetype) {
e.preventDefault();
} else {
addExpenseCategory();
return $scope.data.expensetype;
}
}
},
]
});
myPopup.then(function (res) {
$log.log('Tapped!', res);
});
}
Try this:
var categorytitle = '';
$log.log('vm.usertype', vm.usertype);
switch (vm.usertype) {
case 'Farmer':
categorytitle = 'Enter coconut type';
break;
case 'Worker':
categorytitle = $translate.instant('{{"venterworktype_message" | translate}}');
break;
case 'Buyer':
categorytitle = $translate.instant('{{"venterproduct_message" | translate}}');
break;
case 'Group':
categorytitle = $translate.instant('{{"wtype_message" | translate}}');
break;
case 'Expense':
categorytitle = $translate.instant('{{"newexpensetype_message" | translate}}');
break;
}
var myPopup = $ionicPopup.show({
template: '<input focus-me type="text" ng-model="data.expensetype" limit-char limit="15">',
//title: $translate.instant('{{"penterexpensetype_message" | translate}}'),
title: categorytitle,
scope: $scope,
buttons: [
{ text: $translate.instant('{{"pcancel_message" | translate}}') },
{
text: $translate.instant('{{"psave_message" | translate}}'),
type: 'button-positive',
onTap: function (e) {
if (!$scope.data.expensetype) {
//don't allow the user to close unless he enters producttype
e.preventDefault();
} else {
addExpenseCategory();
return $scope.data.expensetype;
}
}
},
]
});
myPopup.then(function (res) {
$log.log('Tapped!', res);
});

extjs gridpanel reconfigure issue

I have the below to reconfigure gridpanel, it works fine the first time, but the second time it throws the following error:
JavaScript runtime error: unable to get property 'id' of undefined or null reference"
What is wrong with my code?
$.ajax({
url: "/Home/Create",
data: JSON.stringify({ inputdata: selectedValues }),
async: false,
type: "POST",
contentType: 'application/json',
success: function (result) {
var columns = [];
var _fields = [];
var data = {
Key: [],
Value: []
};
var nameCount = 0;
var resultSet = result.result;
resultSet.forEach(function (element) {
for (var key in element) {
if (element.hasOwnProperty(key)) {
var keyStr = key;
data.Key.push(keyStr);
data.Value.push(element[key]);
}
}
}
});
var column;
var count = 0;
resultSet.forEach(function (element, index, ar) {
for (var key in element) {
if (!element.hasOwnProperty(key)) continue;
if (element.hasOwnProperty(key)) {
var field = {};
var elementValue = element[key];
var typeCheck = typeof elementValue;
field['name'] = key;
if (key.startsWith('Completed')) {
field['type'] = 'date';
field['submitFormat'] = 'm/d/Y';
field['submitValue'] = true;
}
else {
switch (typeCheck) {
case 'number':
field['type'] = 'int';
break;
case 'boolean':
field['type'] = 'string';
break;
case 'string':
field['type'] = 'string';
break;
case 'object':
field['type'] = 'object';
break;
case 'date':
field['type'] = 'date';
break;
default:
}
}
_fields.push(field);
if (key == 'EmployeeId' || key == 'EmployeeGroup'
|| key == 'GroupMemberId') {
column = Ext.create('Ext.grid.column.Column', {
text: key,
dataIndex: key,
hidden: true
});
columns.push(column);
}
else {
if (!key.startsWith('EmployeeName') && !key.startsWith('EmployeeStatus') && !key.startsWith('Completed')) {
column = Ext.create('Ext.grid.column.Column', {
text: key,
dataIndex: key,
width: 80
});
columns.push(column);
}
}
}
}
});
var keyValue = data.Key;
var values = data.Value;
var nameKeyValue = [];
var nameFinalValue;
for (var i = 0; i < keyValue.length; i++) {
for (var j = 0; j < values.length; j++) {
if (keyValue[i].startsWith('Name')) {
nameKeyValue.push(values[j]);
}
}
}
for (var i = 0; i < keyValue.length; i++) {
nameFinalValue = nameKeyValue[i];
if (keyValue[i].startsWith('Name')) {
var status = keyValue[i + 1];
var completed = keyValue[i + 2];
column = Ext.create('Ext.grid.column.Column', {
text: nameFinalValue,
dataIndex: nameFinalValue,
columns: [
Ext.create('Ext.grid.column.Column', {
text: 'Employee Status',
dataIndex: status,
width: 80,
stopSelection: false,
editable: true,
editor: {
xtype: 'checkbox'
},
field: { xtype: 'checkbox' }
}),
Ext.create('Ext.grid.column.Column', {
text: 'Completed',
dataIndex: completedOn,
width: 80,
editor: new Ext.form.DateField({
xtype: 'datefield',
format: 'm/d/y',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
})
})
]
});
columns.push(column);
}
}
// *** new code
var store = Ext.create("Ext.data.Store", {
id: 'myStore',
fields: _fields,
groupField: 'Group',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data'
}
}
});
var grid = App.myGrid;
grid.reconfigure(Ext.getStore('myStore'), columns);//this line throws error
grid.getStore().loadData(result.result);
grid.getView().refresh();
selectedValues = [];
}
}
});
replace error-throwing line with
grid.reconfigure(store, columns);
Try clearing your store before loading new data
grid.getStore().removeAll();

Dynamic angular chart

I'm trying to create a dynamic chart from userTemplate object.
I'm using this directive angular-flot and I want create the dataset and options of directive dynamically.
Its work but I have this error
Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.21/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3…ection%5C%22%3A%7B%5C%22color%5C%22%3A%5C%22%2354728c%5C%22%7D%7D%22%5D%5D
at Error (native)
at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:6:450
at k.$get.k.$digest (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:110:66)
at k.$get.k.$apply (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:112:173)
at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:122:253
at e (http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:37:440)
at http://mwm3-gui/asset/script/vendor/angular2.1/angular.min.js:41:120
HTML
<div ng-repeat="panel in row.panels" class="{{panel.columnClass}}" resizable id="{{panel.id}}" r-directions="['right']">
<flot dataset="getDataForChart(panel)" options="getOptionForChart(panel)" height="{{panel.graph.height}}"></flot>
</div>
CONTROLLER
$scope.userTemplate = [
{
blockId: 'blockUno',
title: 'Block title',
rows: [
{
rowId: 'rowUno',
title: 'Row Title 1',
panels: [
{
id: 'palel-report-1',
title: 'uno',
columnClass: 'col-md-4',
graph: {
height: 250,
type: "BAR",
countBy: "status"
}
},
{
id: 'palel-report-2',
title: 'due',
columnClass: 'col-md-4',
graph: {
height: 250,
type: "PIE",
countBy: "status"
}
},
{
id: 'palel-report-3',
title: 'tre',
columnClass: 'col-md-4',
graph: {
height: 250,
type: "BAR",
countBy: "status"
}
}
]
}
],
tables: []
}
];
$scope.getDataForChart = function(panel) {
var graphData = [];
var countBy = panel.graph.countBy;
var arr = $scope.reportingData;
for (var i = 0; i < arr.length; i++) {
var valueOfkey = arr[i][countBy];
graphData.push(valueOfkey);
}
var a = [], b = [], prev;
graphData.sort();
for (var i = 0; i < graphData.length; i++) {
if (graphData[i] !== prev) {
a.push(graphData[i]);
b.push(1);
} else {
b[b.length - 1]++;
}
prev = graphData[i];
}
var graphData = [];
for (var i = 0; i < a.length; i++) {
var singleO = {label: '' + a[i], data: [[i, b[i]]]};
graphData.push(singleO);
}
return graphData;
};
$scope.getOptionForChart = function(panel) {
var options = angular.copy($scope.defaultPlotOptions);
var typeGraph = panel.graph.type;
switch (typeGraph) {
case "BAR":
options.series.bars.show = true;
break;
case "LINE":
options.series.lines.show = true;
break;
case "PIE":
options.series.pie.show = true;
break;
case "POINT":
options.series.points.show = true;
break;
case "TABLE":
break;
}
return options;
};
The error you get is from an infinite digest loop.
In a couple of places you are calling functions that return new items each time. Here's an example from the docs linked from the error message you received that suggests this may cause this error:
One common mistake is binding to a function which generates a new
array every time it is called. For example:
<div ng-repeat="user in getUsers()">{{ user.name }}</div>
$scope.getUsers = function() { return [ { name: 'Hank' }, { name: 'Francisco' } ]; };
Since getUsers() returns a new array, Angular
determines that the model is different on each $digest cycle,
resulting in the error. The solution is to return the same array
object if the elements have not changed:
var users = [ { name: 'Hank' }, { name: 'Francisco' } ];
$scope.getUsers = function() { return users; };
In your code, you are doing the same binding to getDataForChart and getOptionForChart.

How can I fix this angular memory leak?

Here's my js
var app = angular.module('SearchAndResultsApp', ['angularUtils.directives.dirPagination']);
app.controller('SearchAndResultsController', function($location ,$scope, $http){
$scope.fields = [
{ id: 'accountNumber', name: 'Account Number', clicked: false},
{ id: 'pointOfInterestName', name: 'Point Of Interest Name', clicked: true},
{ id: 'address1', name: 'Address 1', clicked: false},
{ id: 'address2', name: 'Address 2', clicked: false},
{ id: 'city', name: 'City', clicked: false},
{ id: 'isostateCode', name: 'ISO State Code', clicked: false},
{ id: 'postalCode', name: 'Postal Code', clicked: false},
{ id: 'phone', name: 'Phone', clicked: false},
{ id: 'fax', name: 'Fax', clicked: false},
{ id: 'website', name: 'Website', clicked: false},
{ id: 'email', name: 'Email', clicked: false},
{ id: 'isocountryCode', name: 'ISO Country Code', clicked: false},
{ id: 'latitude', name: 'Latitude', clicked: false},
{ id: 'longitude', name: 'Longitude', clicked: false}
];
$scope.getSearchState = function() {
var fields = window.location.hash.substring(1).split("&");
if (fields.length > 0) {
return decodeURIComponent(fields[0]);
} else {
return '';
}
};
$scope.getPageState = function() {
var fields = window.location.hash.substring(1).split("&");
if (fields.length > 1) {
return parseInt(fields[1]);
} else {
return 1;
}
};
$scope.noResults = false;
$scope.pointsOfInterest = null;
$scope.loadingQuery = false;
$scope.orderDirection = 'asc';
$scope.glyphDirection = 'glyphicon-triangle-top';
$scope.orderedBy = 'pointOfInterestName';
$scope.previousClicked = $scope.fields[1];
$scope.lowerRange = 0;
$scope.upperRange = 0;
$scope.totalRange = 0;
$scope.currentPage = $scope.getPageState();
$scope.searchString = $scope.getSearchState();
$scope.offset = 'col-sm-offset-4';
$scope.loadingOffset = 'col-sm-offset-1';
$scope.getResultsState = function() {
return ((($scope.pointsOfInterest == null)||($scope.pointsOfInterest[0] == null)) && ($scope.searchString != ''))
};
$scope.downloadCSV = function(selection) {
if (selection == 'searched') {
window.location = 'pointsOfInterest/' + encodeURIComponent($scope.searchString) + '/orderedList/' + $scope.orderedBy + '/' + $scope.orderDirection + '/csv';
} else if (selection == 'all') {
if (confirm("This may take some time.")){
window.location = 'allPointsOfInterest/csv';
}
}
};
$scope.updateRanges = function() {
$scope.searchString = $scope.searchString = $scope.searchString.replace(/\//g,'').replace(/\\/g,'');
window.location.hash = encodeURIComponent($scope.searchString) + '&' + encodeURIComponent($scope.currentPage);
if ($scope.pointsOfInterest[0] != null) {
$scope.lowerRange = ($scope.currentPage - 1) * 20 + 1;
$scope.totalRange = $scope.pointsOfInterest.length;
$scope.upperRange = $scope.currentPage * 20;
} else {
$scope.lowerRange = 0;
$scope.totalRange = 0;
$scope.upperRange = 0;
}
if ($scope.upperRange > $scope.totalRange) {
$scope.upperRange = $scope.totalRange;
}
};
$scope.updateGlyphs = function(field) {
$scope.searchString = $scope.searchString = $scope.searchString.replace(/\//g,'').replace(/\\/g,'');
$scope.orderedBy = field.id;
if ($scope.previousClicked != null)
$scope.previousClicked.clicked = false;
field.clicked = true;
if ($scope.previousClicked == field) {
if ($scope.orderDirection == 'asc') {
$scope.orderDirection = 'desc';
$scope.glyphDirection = 'glyphicon-triangle-bottom';
} else {
$scope.orderDirection = 'asc';
$scope.glyphDirection = 'glyphicon-triangle-top';
}
} else {
$scope.orderDirection = 'asc';
$scope.glyphDirection = 'glyphicon-triangle-top';
}
$scope.updatePointsOfInterest();
$scope.previousClicked = field;
};
$scope.updatePointsOfInterest = function() {
if ($scope.searchString.length != 0) {
$scope.loadingOffset = '';
$scope.currentPage = $scope.getPageState();
$scope.searchString = $scope.searchString.replace(/\//g,'').replace(/\\/g,'');
window.location.hash = encodeURIComponent($scope.searchString) + '&' + encodeURIComponent($scope.currentPage);
if ($scope.searchString == '') return;
$scope.loadingQuery = true;
$http.get('pointsOfInterest/' + encodeURIComponent($scope.searchString) + '/orderedList/' + $scope.orderedBy + '/' + $scope.orderDirection)
.success(function(data) {
$scope.pointsOfInterest = data;
$scope.loadingQuery = false;
$scope.loadingOffset = 'col-sm-offset-1';
$scope.updateRanges();
$scope.noResults = $scope.getResultsState();
if ($scope.pointsOfInterest.length > 0) {
$scope.offset = '';
} else {
$scope.offset = 'col-sm-offset-4';
}
})
.error(function(data) {
window.location = 'pointsOfInterest/' + encodeURIComponent($scope.searchString) + '/orderedList/' + $scope.orderedBy + '/' + $scope.orderDirection;
});
}
};
window.onhashchange = function() {
$scope.updatePointsOfInterest();
}
$scope.updatePointsOfInterest();
$scope.gotoUpdatePage = function (accountNumber) {
window.location.href = 'pointOfInterestEditor/' + accountNumber;
};
$scope.onTextClick = function ($event) {
$event.target.select();
};
});
app.directive('ngDelay', ['$timeout', function ($timeout) {
return {
restrict: 'A',
scope: true,
compile: function (element, attributes) {
var expression = attributes['ngChange'];
if (!expression)
return;
var ngModel = attributes['ngModel'];
if (ngModel) attributes['ngModel'] = '$parent.' + ngModel;
attributes['ngChange'] = '$$delay.execute()';
return {
post: function (scope, element, attributes) {
scope.$$delay = {
expression: expression,
delay: scope.$eval(attributes['ngDelay']),
execute: function () {
var state = scope.$$delay;
state.then = Date.now();
$timeout(function () {
if (Date.now() - state.then >= state.delay)
scope.$parent.$eval(expression);
}, state.delay);
}
};
}
}
}
};
}]);
I get a memory leak from adding in the $location to the controller. I would like to use $location instead of window.location. I'm not sure why the memory leak is caused. Anyone know why and how to fix it?
Edit: It appears to be making infinite get requests. Still not sure how to fix it.
First of all $location service has a hash() method that u can use instead of window.location.hash().
Second: you call $scope.updatePointsOfInterest() method on your controller load that do a http get request. If it fails it changes the url. When the url is changed your controller code is reloaded, hence $scope.updatePointsOfInterest() method is executing again and again.
I'm not sure why $http.error() method is triggered. It could be anything. Check out your XHR request in Network tab in dev tools (Chrome).
If your $http.error() method should fail (this means that there's an error and it's properly handled) than to fix the "infinite looping" issue you can do the following:
1) either doesn't call $scope.updatePointsOfInterest() on controller loading
2) or doesn't change the url in your $http.error() method
If you describe what you're trying to achieve with this updatePointsOfInterest() method I will be able to help you write it properly.
Regards,
Aleksey

How to update the element color and sort it based on added string on the element using angularjs directive?

I have name list iterating with ng options in multi select list box. When an option is clicked and a green check box is selected "green" string will be added to the element and its color is updated to green and sorted to the bottom of the list. I want to do this using angular directive.
http://jsfiddle.net/aastha/PMg7d/
.directive('changeColor', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var color;
scope.$watch(attrs.ngModel, function (value) {
console.log("attrs.ngModel",attrs.ngModel);
console.log("VALUE",value);
if (value.name && value.name.indexOf("Green") != -1) {
console.log("INSIDE GREEN");
color = 'green';
myStyle = {color:'green'};
scope.style={"color":"green"}
} else if (value.name && value.name.indexOf("Blue") != -1) {
console.log("INSIDE BLUE");
color = 'blue';
myStyle = {color:'blue'};
scope.style={"color":"blue"}
} else {
console.log("DEFAULT RED");
color ='red';
myStyle = {color:'red'};
}
}, true);
}
}
})
;
I resorted using ng-repeat and custom sort functions.
http://jsfiddle.net/PMg7d/4/
angular.module('demoApp', []).controller('DemoController', function($scope) {
$scope.colors = [
{ id: '1', name: 'color1' },
{ id: '2', name: 'color2' },
{ id: '3', name: 'color3' },
{ id: '4', name: 'color4' },
{ id: '5', name: 'color5' },
{ id: '6', name: 'color6' },
{ id: '7', name: 'color7' }
];
$scope.selectedColor = $scope.colors[0];
$scope.style={"color":"red"}
$scope.colorClick = function (color) {
$scope.selectedColor = color;
console.log("ID", $scope.selectedColor);
}
$scope.addGreen = function (){
if (!$scope.green) {
$scope.selectedColor.name = $scope.selectedColor.name.concat(" (Green)");
} else {
$scope.selectedColor.name = $scope.selectedColor.name.replace(" (Green)","");
}
}
$scope.addBlue = function (){
if (!$scope.blue) {
$scope.selectedColor.name = $scope.selectedColor.name.concat(" (Blue)");
} else {
$scope.selectedColor.name = $scope.selectedColor.name.replace(" (Blue)","");
}
}
$scope.greenSort = function (color) {
return color.name.indexOf("Green")
}
$scope.blueSort = function (color) {
return color.name.indexOf("Blue")
}
})
.directive('changeColor', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var color;
scope.$watch('color.name', function (value) {
if (value.indexOf("Green") != -1) {
console.log("INSIDE GREEN");
scope.style={"color":"green"}
} else if (value.indexOf("Blue") != -1) {
scope.style={"color":"blue"}
} else {
scope.style = {color:'red'};
}
}, true);
}
}
})
;

Resources