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">
Related
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)
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;
}
}
},
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);
}
}
};
I have successfully been able to send data to the firebase server however I am having trouble getting the data to send to the appropriate data subset I have created. When I send data made in the html form, It sends organized by ID number. I need it to be sent as a child to the 'groups' category in firebase.
here is a Plnkr with the server and $add working. Any suggestions I would really appreciate!
http://plnkr.co/edit/LZ24sRoSJjuCHQnEGzQz?p=linter
.controller('MainCtrl', ['$scope', 'groupsService', function( $scope, groupsService, $firebase ) {
$scope.newGroup = {
name: '',
status: ''
};
$scope.addGroup = function(newGroup) {
groupsService.addGroup(newGroup);
$scope.newGroup = {
name: '',
status: ''
};
};
$scope.updateGroup = function (id) {
groupsService.updateGroup(id);
};
$scope.removeGroup = function(id) {
groupsService.removeGroup(id);
};
}])
.factory('groupsService', ['$firebase', 'FIREBASE_URI',
function ($firebase, FIREBASE_URI) {
var ref = new Firebase(FIREBASE_URI);
var groups = $firebase(ref).$asArray();
var getGroups = function(){
return groups;
};
var addGroup = function (newGroup) {
console.log(newGroup)
groups.$add(newGroup);
};
var updateGroup = function (id){
groups.$save(id);
};
var removeGroup = function (id) {
groups.$remove(id);
};
return {
getGroups: getGroups,
addGroup: addGroup,
updateGroup: updateGroup,
removeGroup: removeGroup,
}
}]);
Thanks for responding! What I am trying to do is add dummy data (name and status) to the groups category like this:
{
Groups:[
"-JcFXid1A2G8EM7A_kwc" : {
"name" : "hi",
"status": "inactive"
},
"-JcFZP5FNtL4Yj6nja_7" : {
"name" : "hi"
"status": "inactive"
},
"-JcFtGoZL7J-CCIjTYcL" : {
"name" : "dfgdfg",
"status": "inactive"
}
]
}
would it make more sense to have them organized by active or inactive? I am afraid to nest too far in firebase...
like
{
Groups:[
"Active":[
"-JcFXid1A2G8EM7A_kwc" : {
"name" : "hi",
}
],
"Inactive":[
"-JcFZP5FNtL4Yj6nja_7" : {
"name" : "hi"
},
"-JcFtGoZL7J-CCIjTYcL" : {
"name" : "dfgdfg"
}
]
]
}
This isn't an answer to your question yet, because I first need to understand what you're trying to accomplish (and I can't fit this amount of information in a comment).
In your view you have a form that binds to the group's name and status:
<form role="form" ng-controller="MainCtrl" ng-submit="addGroup(newGroup)">
<div class="form-group">
<label for="groupName">Group Name</label>
<input type="text" class="form-control" id="groupName" ng-model="newGroup.name">
</div>
<div class="form-group">
<label for="groupStatus">Group Status</label>
<select class="form-control" ng-model="newGroup.status">
<option value="inactive">Inactive</option>
<option value="active">Active</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
In your GroupsService you essentially add a group like this:
var ref = new Firebase(FIREBASE_URI);
var groups = $firebase(ref).$asArray();
groups.$add(newGroup);
Which adds the group to the collection at that URL.
Which leads to this data structure:
{
"-JcFXid1A2G8EM7A_kwc" : {
"name" : "hi",
"status" : "inactive"
},
"-JcFZP5FNtL4Yj6nja_7" : {
"name" : "hi",
"status" : "active"
},
"-JcFtGoZL7J-CCIjTYcL" : {
"name" : "dfgdfg",
"status" : "active"
}
}
But if I understand you correctly you to want the data to be stored like this:
{
"inactive": [
"-JcFXid1A2G8EM7A_kwc" : {
"name" : "hi"
}
],
"active": [
"-JcFZP5FNtL4Yj6nja_7" : {
"name" : "hi"
},
"-JcFtGoZL7J-CCIjTYcL" : {
"name" : "dfgdfg",
}
]
}
Is this indeed what you're looking to do?
Are you ever going to display active and inactive groups combined in a list? This is important to know, since it is quite easy to filter a list in Angular, but I wouldn't know how to merge two lists.
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"/>