Handling Checkbox in angular js - angularjs

div class ="col-lg-5 stylethistitle">
<input type=" checkbox" ng-model = "checkedStatus">Show Deactivated Account</div>
I need to pass $scope.checkedStatus in my json request as false when it is selected and true when it is unselected.
I need that for showing deactivated accounts.
Included my JS Below
JS :
$scope.checkedStatus = true;
$scope.viewAccount = function(){
var json = {
"json": {
"request": {
"servicetype": "6",
"functiontype": "6014",
"session_id": $rootScope.currentSession,
"data": {
"shortname": $scope.model.selectShortName,
"groupzname": $scope.model.selectGname,
"city": $scope.model.selectCity,
"state": $scope.model.selectState,
"country": $scope.model.selectCountry,
"groupzcode": $scope.model.selectGcode,
"activationstatus": $scope.checkedStatus,
"details": false,
"sortbasedon": $scope.groupzname,
"offset":$scope.pagination
}
}
}
};
$scope.sortkey='';
$scope.reverse=false;
UserService.viewListAccount(json).then(function(response) {
if (response.json.response.statuscode == 0 && response.json.response.statusmessage == 'Success')
{
$scope.tableData = response.json.response.data;
}
});
};

Assign a default value for $scope.checkedStatus in the controller. Set it to true or initial value.
Check doc here

you need to set $scope.checkedStatus default to false. and then use it in your json like as -
"activationstatus":!($scope.checkedStatus)

Related

Using ng-change in search box

Request :
$scope.viewAccount = function(){
var json = {
"json": {
"request": {
"servicetype": "60",
"functiontype": "1014",
"data": {
"shortname": $scope.model.selectShortName,
"groupzname": $scope.model.selectGname,
"city": $scope.model.selectCity,
"state": $scope.model.selectState,
"country": $scope.model.selectCountry,
"groupzcode": $scope.model.selectGcode,
"activationstatus": true,
"details": false,
"sortbasedon": $scope.groupzname,
"orderby": "desc",
"limit":10,
}
}
}
};
UserService.viewListAccount(json).then(function(response) {
console.log(JSON.stringify(json));
if (response.json.response.statuscode == 0 && response.json.response.statusmessage == 'Success')
{
$scope.tableData = response.json.response.data;
console.log($scope.tableData);
}
else{
alert(response.json.response.statusmessage);
}
});
};
The above function is to display all datas into table.I have a search box in groupzname,shortname and I used ng-change and called a new function changeviewAccount() removing offset in request. But the problem here I get is even if I enter one letter in searchbox, the function is getting called everytime. I am new to AngularjS .
Instead of ng-change , you can use ng-blur,whhich tells AngularJS what to do when an input box loses focus.
<input ng-blur="changeviewAccount()" type="text" class="form-control" placeholder="Title">

Design pattern for AngulasJS controller with 'parameter' from HTML

I am new to AngularJS, and I am used to program in C/C++, so I feel a little lost in the new AngulaJS world.
I have the var DefMenuItem holding information to display a table with menu items.
var DefMenuItem =
{
"menuItemsNumF32": [
{
"kind": "Num",
"obj": "eDefRegKinDriverMidObjItemIdHumWaterHardness",
"msg": "eDefGuiMsgIdNumWaterHardness",
"opt": null,
"hide": null
},
{
"kind": "Num",
"obj": "eDefRegKinDriverMidObjItemIdHumKeepWarmOffset",
"msg": "eDefGuiMsgIdNumKeepWarmOffset",
"opt": null,
"hide": null
},
{
"kind": "Num",
"obj": "eDefRegKinDriverMidObjItemIdHumFlickerCorrection",
"msg": "eDefGuiMsgIdNumFlickerCorrection",
"opt": null,
"hide": null
}
],
"menuItemsNumU32": [
{
"kind": "Num",
"obj": "eDefRegKinDriverMidObjItemIdHumKeepWarmTimeStart",
"msg": "eDefGuiMsgIdNumKeepWarmTimeStart",
"opt": null,
"hide": null
},
{
"kind": "Num",
"obj": "eDefRegKinDriverMidObjItemIdHumKeepWarmTimeEnd",
"msg": "eDefGuiMsgIdNumKeepWarmTimeEnd",
"opt": null,
"hide": null
},
{
"kind": "Num",
"obj": "eDefRegKinDriverMidObjItemIdBathDuration",
"msg": "eDefGuiMsgIdNumBathDuration",
"opt": null,
"hide": null
}
]
}
And two AngularJS controllers to link one of the lists to a with the table
kinAngularApp.controller('kinServiceNumF32Controller', [function () {
var self = this;
var menuItemProperty = "menuItemsNumF32";
self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]);
self.refresh = function () {
self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]);
refreshServicePage();
}
self.save = function () {
saveObjectItemListValues(DefMenuItem[menuItemProperty], self.objectItemList);
}
}]);
kinAngularApp.controller('kinOverviewNumU32Controller',[ function() {
var self = this;
var menuItemProperty = "menuItemsNumU32";
self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]);
self.refresh = function() {
self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]);
refreshOverviewPage();
}
self.save = function() {
saveObjectItemListValues(DefMenuItem[menuItemProperty], self.objectItemList);
}
}]);
The only difference of the controllers is the menu item list they use by intialising menuItemProperty.
What is the correct design pattern to select the menu item list on the HTML side and use multiple instances of only one controller?
Is it the correct pattern to use only one controller with service, factory or whatever?
Here ist the HTML side
<div id="menuItemMainService"
ng-controller="kinServiceNumF32Controller as kinServiceCtrl"
class="w3-panel rte-menuPage" style="display: none">
<table id="idTableObjectItem" class="w3-table">
<tr>
<th>Name</th>
<th>Value</th>
<th>Unit</th>
<th>Object Id</th>
</tr>
<tr ng-repeat="objectItem in kinServiceCtrl.objectItemList" >
<td>{{objectItem.name}}</td>
<td><input ng-model="objectItem.value" class="w3-input w3-right-align" type="text"></td>
<td>{{objectItem.unit}}</td>
<td>{{objectItem.objectId}}</td>
</tr>
</table>
<button id="buttonRefreshService" class="w3-btn" ng-click="kinServiceCtrl.refresh()">Refresh</button>
<button id="buttonSaveService" class="w3-btn" ng-click="kinServiceCtrl.save()">Save</button>
</div>
You could use routing.
For example you could use standard angular ngRouter. In this case you could move menuItemProperty in controller arguments list.
kinAngularApp.controller('kinOverviewController',['menuItemProperty ', function(menuItemProperty ) {
var self = this;
self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]);
self.refresh = function() {
self.objectItemList = buildObjectItemList(DefMenuItem[menuItemProperty]);
refreshOverviewPage();
}
self.save = function() {
saveObjectItemListValues(DefMenuItem[menuItemProperty], self.objectItemList);
}
}]);
Here example: http://codepen.io/anon/pen/zBQKZk

React Js select list to have own value

I have rows of selects lists, when I change a list on one row, the lists for the whole table column change, is there a way each select list can have its own selected option?
I an rendering each row component use the following schema:
tableRowScheme: [
{"column":"levelId",
"title":"Level",
"type": "select",
"optionData": this.state.gradeOptions,
"afterChange": this.onLevelSelect,
"className": "col-md-1"},
{"column":"subjectId",
"title":"Subject",
"type": "select",
"optionData": this.state.subjects,
"afterChange": this.onSubjectSelect,
"className": "col-md-1"},
Then Im rendering each select list
case 'select': {
var optionsData = cellData.optionData ? cellData.optionData : [];
if(cellData.isRowInEditMode && !cellData.isNonEditable) {
return (
<div>
<TableDropdown columnName={cellData.column}
staticElements={this.props.staticElements}
optionsData={optionsData}
staticElementId={cellData.selectTypeId}
defaultValue={parseInt(this.state.rowDataStack[cellData.column])}
className="input-sm"
handleSelect={this.onDropdownChange}/>
<Input type="hidden" ref={cellData.column} standalone={true}
defaultValue={parseInt(this.state.rowDataStack[cellData.column])} />
</div>
);
Then each dropdown has this.onDropdownChange :
onDropdownChange: function(data){
var localRowDataStack = _.cloneDeep(this.state.rowDataStack);
localRowDataStack[data.filterName] = data.filterVal;
this.setState({
rowDataStack: localRowDataStack,
isOmitReRender: false
});
for (var i=0; i<this.props.rowScheme.length;i++) {
if(this.props.rowScheme[i].afterChange != undefined && this.props.rowScheme[i].column == data.filterName) {
this.props.rowScheme[i].afterChange(data.filterVal);
break;
}
}
},

AngularJS filter already selected option from dynamic field

I have a form where you can add x number of fields. Each field contains option select. I want to filter out the already chosen option when this option is already chosen in one or multiples field before. Each field has a remove button and the form has 1 add button.
How can I filter out the dynamic fields?
Any help,guidance is most welcome.Thanks in advance. :)
This is how my HTML looks like:
<div data-ng-repeat="choice in choices">
<select data-ng-model="choice.option"
data-ng-options="item as item.Value for item in options">
</select>
<button data-ng-click="removeChoice(choice)">Remove choice</button>
<div>
<button data-ng-show="choices.length <= 4" data-ng-click="addNewChoice()">Add Choice</button>
</div>
</div>
And my controller:
$scope.options = [
{
"Key": "0",
"Value": "Select an option"
},
{
"Key": "Option1",
"Value": "Option1"
},
{
"Key": "Option2",
"Value": "Option2"
},
{
"Key": "Option3",
"Value": "Option3"
},
{
"Key": "Option4",
"Value": "Option4"
},
{
"Key": "Option5",
"Value": "Option5"
}
];
$scope.choices = [{ id: '1' }];
$scope.addNewChoice = function () {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({ id: newItemNo, option: $scope.option, value: $scope.value });
};
$scope.removeChoice = function () {
var index = $scope.choices.indexOf(choice);
$scope.choices.splice(index, 1);
};
ok
i can give simple recommendation which will be this.
1: add variable $scope.selectedOptions = [];
this will contain list of already selected options from all select elements .
2: create function $scope.AddSelectedOption(item);
this will add the selected object when we change option from any select element because we are going to use for all selects ng-change= "AddSelectedOption(item);"
3: add checkIfSelected(item); this will check if given object value is already selected or not ..
will user in
hope you understand what it will do just check like this
$scope.checkIfSelected = function (item) {
$scope.selectedFound = $scope.selectedOptions.filter(function
(option) {
if(option.value == item.value)
{
return day;
}
});
if($scope.selectedFound.length == 0 ) { return false; } else {
return true; }
}
This will return true if give item found in the options.
if not out.. you can invite me to help again .
This is possible. I'm explaining a basic version of this requirement. See the working example here http://plnkr.co/edit/S9yZpjhY55lXsuifnUAc?p=preview
What wer are doing is maintaining another options which is the copy of the original options. Copying the options will make it to not reference existing options since objects are pass by reference in Javascript.
The main logic is in this function, which modify the options on selection:
$scope.optionSelected = function(choice) {
$scope.availableOptions = $scope.availableOptions || angular.copy($scope.options);
if (choice.option) {
var index = -1;
// See if available options has that key
angular.forEach($scope.availableOptions, function(item, i) {
if (item.Key === choice.option.Key) {
index = i;
}
});
if (index > -1) {
// And then remove it
$scope.availableOptions.splice(index, 1);
}
}
};

kendo combobox giving error while enabling and disabling

I am using kendo combobox. I have written below code to enable and disable combobox
function enableDisableFrameworkAndAltFrameworkVersion(platformVersion) {
var comboBox = $("#selFrameworkVersion").data("kendoComboBox");
if (platformVersion === 1 ) {
comboBox.enable(false);
}
}
But this code gives me error as "Uncaught TypeError: Cannot call method 'enable' of undefined "
Please help. Thanks in advance.
Now i followed one example on this link below
Disable kendo combo
So now i changed code in my html and added enabled parameter to kendo combobox like below
<input id="selFrameworkVersion" data-bind="kendoComboBox: { dataTextField: 'Name', dataValueField: 'Id', data: $root.versionListByProductType, value: $root.editFrameworkVersion, enabled: enableFrameWorkCombo} />
In my view model i declare one observable like below
self.enableFrameWorkCombo = ko.observable(true);
Then changed my function like below
function enableDisableFrameworkAndAltFrameworkVersion(platformVersion) {
var comboBox = $("#selFrameworkVersion").data("kendoComboBox");
if (platformVersion === 1 ) {
$('#multiAltVersion').attr("disabled", true);
//comboBox.enable(false);
self.enableFrameWorkCombo(false);
return;
}
else if (platformVersion === 2 || platformVersion === 3) {
//comboBox.enable(true);
self.enableFrameWorkCombo(true);
$('#multiAltVersion').attr("disabled", true);
}
else {
//comboBox.enable(true);
self.enableFrameWorkCombo(true);
$('#multiAltVersion').attr("disabled", false);
}
}
Now it gives me error
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: enableFrameWorkCombo is not defined;
Bindings value: kendoComboBox: { dataTextField: 'Name', dataValueField: 'Id', data: $root.versionListByProductType, value: $root.editFrameworkVersion, enabled: enableFrameWorkCombo, optionsCaption: 'Please select Version...' }
What am i doing wrong here?
The fact that is shows "Uncaught TypeError: Cannot call method 'enable' of undefined " while executing:
function enableDisableFrameworkAndAltFrameworkVersion(platformVersion) {
var comboBox = $("#selFrameworkVersion").data("kendoComboBox");
if (platformVersion === 1 ) {
comboBox.enable(false);
}
}
means that comboBox is undefined. Since it is the result of computing $("#selFrameworkVersion").data("kendoComboBox") means that there is an HTML element with id selFrameworkVersion but it is not a kendoComboBox.
Please, check that when you invoke this function, kendoComboBox is actually initialized.
EDIT:
The following example (running on http://jsfiddle.net/OnaBai/qtaAS/) enables / disable a ComboBox using above function...
function enableDisableFrameworkAndAltFrameworkVersion(platformVersion) {
var comboBox = $("#selFrameworkVersion").data("kendoComboBox");
console.log("combobox", comboBox);
if (platformVersion === 1) {
comboBox.enable(false);
} else {
comboBox.enable(true);
}
}
var viewModel = kendo.observable({
data : [
{ "Id": 1, "Name": "node1" },
{ "Id": 2, "Name": "node2" },
{ "Id": 3, "Name": "node3" },
{ "Id": 4, "Name": "node4" },
{ "Id": 5, "Name": "node5" }
],
enableFrameWorkCombo: function () {
alert("hello");
}
});
$("#disable").on("click", function () {
enableDisableFrameworkAndAltFrameworkVersion(1);
});
$("#enable").on("click", function () {
enableDisableFrameworkAndAltFrameworkVersion(2);
});
kendo.bind($("#selFrameworkVersion"), viewModel);
And the HTML is:
<div>Disable</div>
<div>Enable</div>
<input id="selFrameworkVersion"
data-role="combobox"
data-text-field="Name"
data-value-field="Id"
value="2"
data-bind="source : data, enabled: enableFrameWorkCombo"/>

Resources