I have checkbox (with selected value by user, checked ). So I need to edit this checkbox and get all the selected value into an array and send it to post.
Html
<div *ngFor="let item of officeLIST">
<div *ngIf ="item.officeID== userdata.officeID">
<input #office type="checkbox" id="office" name="office" class="form-control" value="{{item.officeName}}" checked (click)="officeSelection($event,$event.target.value)" > {{(item.officeName== "" ? "--No data--" : item.officeName)}}
</div>
<div *ngIf ="item.officeID!= userData.officeID">
<input #office type="checkbox" id="office" name="office" class="form-control" value="{{item.officeName}}" (click)="officeSelection($event,$event.target.value)"> {{(item.officeName== "" ? "--No data--" : item.officeName)}}
</div>
</div>
<button type="button" class="btn btn-primary"(click)="updateOffice(userData.officeID)"> Save </button>
Click function (to add selected value and to remove unselected value)
officeSelection(event: any, value) {
if (event.target.checked === true)
{
this.officeArray.push(value);
}
else {
this.officeArray.splice(this.officeArray.indexOf(value), 1);
}
}
Update Function
updateOfficeDetail(officeid) {
if(officeid= 1)
{
this.officeArray.push('stars dept');
}
else if(officeid= 2)
{
this.officeArray.push('moon dept');
}
else
{
this.officeArray.push('Sun dept');
}
}
Problem is
if I update the data without changing current value of checkbox,eg: sun dept, this sun dept will be push into officeArray .
but if again I want to update the data by editing the checkbox(choose another value), so the previous selected value and current selected value will be push into this officeArray
if user did not edit the checkbox (just proceed with current selected value)>>>> the officeArray will look like this
["sun"]
and if the user tried to update the checkbox by clicking one more checkbox, the array will look like this
["sun","moon","sun"]
I just want ["sun","moon"] in the officeArray. should i remove? or clear something?
I tried to do some research and a lot questions similar to me. but somehow all the solutions did not work for me. any idea?
Thank you
I recommend using HashMap instead of array:
Map<String,String> officeMap = new HashMap<>();
officeMap.put(index, value);
in your if expression in updateOfficeDetail method:
if(officeid === 1)
instead of
if(officeid= 1)
I recommand in your case to use Set instead of Array:
class youComponent{
//...
officeSelection(event: any, value) {
if (event.target.checked === true)
{
if(this.officeArray.includes(value.trim())){
this.officeArray.push(value);
}
}
else {
this.officeArray.splice(this.officeArray.indexOf(value), 1);
}
}
updateOfficeDetail(officeid) {
if(officeid === 1)
{
if(this.officeArray.includes('stars dept')){
this.officeArray.push('stars dept');
}
}
else if(officeid === 2)
{
if(this.officeArray.includes('moon dept')){
this.officeArray.push('moon dept');
}
}
else
{
if(this.officeArray.includes('Sun dept')){
this.officeArray.push('Sun dept');
}
}
}
}
Related
I am using primeng p-virtualScroller for implementing loading data with scroller.It is working fine.But I am facing the below issue:
When the search result is less still it shows the scroller and emplty list items.
Below is the code I am using in Html:
<p-virtualScroller [(value)]="employeeList" scrollHeight="300px" [itemSize]="20" [rows]="pageSize"
[(lazy)]="lazyLoading" (onLazyLoad)="loadCarsLazy($event)" [(totalRecords)]="totalEmployees">
<ng-template let-emp pTemplate="emptymessage" *ngIf="searchResultMsg">
<span>{{searchResultMsg}}</span>
</ng-template>
<ng-template let-emp pTemplate="item" let-odd = odd *ngIf="searchResultMsg===''">
<div (click)="selectEmployee(emp)" class="pl-2 search-list" [class.odd-row]="odd">{{emp.name}} </div>
</ng-template>
</p-virtualScroller>
Below is the issue I want to explain(see the screen shot)
I got the solution to fix the above issue. I update the value of pageSize variable according to the total records available return by API(COUNT)
Code:
callAPIToSearch(searchValue, rowOffset) {
if (!this.isProcessing) {
this.isProcessing = true;
this.empService.searchEmployees(searchValue, rowOffset, this.pageSize).subscribe((apiResp: EmployeeSearchAPIResponse) => {
if (rowOffset == 0 && apiResp.response.COUNT === 0) {
this.searchResultMsg = `No record found, Please enter Relationship Manager's Surname and try again.`;
} else {
this.totalEmployees = apiResp.response.COUNT;
if (apiResp.response.COUNT <= 100) {
this.pageSize = apiResp.response.COUNT
} else{
this.pageSize =100;
}
this.employeeList = apiResp.response.employees;
}
this.isProcessing = false;
})
} }
I'm looking to get a specific element inside an ng-repeat in protractor by the text of one of its properties (index subject to change).
HTML
<div ng-repeat="item in items">
<span class="item-name">
{{item.name}}
</span>
<span class="item-other">
{{item.other}}
</span>
</div>
I understand that if I knew the index I wanted, say 2, I could just do:
element.all(by.repeater('item in items')).get(2).element(by.css('.item-name'));
But in this specific case I'm looking for the 'item in items' that has the specific text (item.name) of say "apple". As mentioned, the index will be different each time. Any thoughts on how to go about this?
public items = element.all(by.binding('item.name'))
getItemByName(expectedName) {
return this.items.filter((currentItem) => {
return currentItem.getText().then((currentItemText) => {
return expectedName === currentItemText;
});
}).first();
}
And invoke method like that this.getItemByName('Item 1'). Replace Item 1 with expected string.
function elementThere(specificText, boolShouldBeThere){
var isThere = '';
element.all(by.repeater('item in items')).each(function (theElement, index) {
theElement.getText().then(function (text) {
// Uncomment the next line to test the function
//console.log(text + ' ?= ' + specificText);
if(text.indexOf(specificText) != -1){
element.all(by.repeater('item in items')).get(index).click();
isThere = isThere.concat('|');
}
});
});
browser.driver.sleep(0).then(function () {
expect(isThere.indexOf('|') != -1).toBe(boolShouldBeThere);
});
}
it('should contain the desired text', function () {
elementThere('apple', true);
}
Does this fit your needs?
I was able to solve this by simplifying #bdf7kt's proposed solution:
element.all(by.repeater('item in items')).each(function(elem) {
elem.getText().then(function(text) {
if(text.indexOf('apple') != -1) {
//do something with elem
}
});
});
Also, this particular solution doesn't work for my use case, but I'm sure will work for others:
var item = element(by.cssContainingText('.item-name', 'apple'));
//do something with item
I want to apply a ng-if in AngularJS depending if any of the values in a JSON is true.
The first level keys are always the same, but then the second level keys are always different. (so I cannot do ng-if="known_stuff.unpredictable_thing", as the name of "unpredictable_thing" will be different each time. Here is the JSON.
{
"known_stuff":
{
"unpredictable_thing":false
},
"known_stuff_2":
{
"non_predictable_stuff":true
},
"known_stuff_3":
{
"something_unknown":false
}
}
Thanks in advance!
controller:
$scope.check = function(someObject) {
// return true if some value is true inside the object
for (var key in someObject) {
if (someObject[key] === true) {
return true;
}
}
return false;
};
template:
ng-if="check(known_stuff)"
or
ng-show="check(known_stuff)"
if your data is an array then the function has to look like that:
$scope.checkData = function(data) {
for (var i = 0; i < data.length; i++) {
for (var key1 in data[i]) {
// return true if some value is true inside the object
for (var key in data[i][key1]) {
if (data[i][key1][key] === true) {
return true;
}
}
}
}
return false;
};
template:
ng-if="checkData(data)"
If you want to check any of the value in your provided json is true then
ng-if="known_stuff.unpredictable_thing == ture ||
known_stuff_2.non_predictable_stuff == true ||
known_stuff_3.something_unknown == true"
If I got your question right, your json will have the first level key same (known_stuff) but inside know_stuff there can be multiple key with different names (like unpredictable_thing here).
The easiest solution is to iterate the first level key, gaining key value pair like below.
<div ng-repeat = "(key, val) in known_stuff" ng-if="known_stuff[key]">
//do something --> {{key}} - {{val}}
</div>
Supporting Plunk -> http://plnkr.co/edit/6hQQAtqRseb1gWvueFKr
-----------------------------------------------UPDATE---------------------------------------------
Assign jsonData with your data.
<div ng-repeat= "stuff in jsonData">
<div ng-repeat = "(key, val) in stuff" ng-if="stuff[key]">
//do something --> {{key}} - {{val}}
</div>
</div>
Also, updated the same plunk. I hope this answers your question.
On page load I checked few of check boxes . using following code
<li ng-repeat="template in alltest" >
<input type="checkbox" name="template" ng-model="template.isselected" value="{{template.id}}" id="{{template.id}}" ng-checked="isChecked(template.id)">
<label for="{{template.id}}" class="position-relative"><span></span>
</label>
</li>
isChecked function
$scope.isChecked = function(id){
var match = false;
if($scope.alltest!=null)
{
for(var i=0 ; i < $scope.alltest.length; i++) {
if($scope.alltest[i].tmp_id == id){
match = true;
}
}
}
return match;
};
When I click on button to get those checkboxes then didn't get those check boxes
angular.forEach($scope.alltest, function(template){
if (template.isselected)
{
alert(template.id)
}
})
If I again deselected those check boxes and again select then i get value..but on page load by default few of check boxes coming with true option and directly i click on submit button then didn't get those checked check box
what is wrong with this code? please help me to solve this
ng-model is defult undefined. When checkbox is checked ng-model create property. that is why you get only checked checkbox when form submitted. You need define false checkboxes also inside isChecked function
ng-checked="isChecked(template.id, $index)">
js
$scope.isChecked = function(id, index) {
var match = false;
if ($scope.alltest != null) {
for (var i = 0; i < $scope.alltest.length; i++) {
if ($scope.alltest[i].tmp_id == id) {
match = true;
}
}
}
if (!match) $scope.alltest[index].isselected = false
return match;
};
I have a pretty simple textbox filtering an ng-repeat on some unordered lis. When I add a value to the textbox the items with the null values are removed and do not return even when the textbox is cleared. I have an idea of why this is happening (the search object now has an empty property which doesn't match the nulls), but I cannot figure out how to solve the problem. I've tried to pop() the property off of the search object with no luck.
HTML:
<div ng-controller="ListCtrl">
<input type="text" ng-model="search.age" placeholder="Age"></input>
<ul>
<li ng-repeat="item in items | filter:search">
{{item.name}} - {{item.age}}
</li>
</ul>
</div>
JS:
function ListCtrl($scope) {
$scope.items = [
{'name':'Carl', 'age':69},
{'name':'Neil', 'age':54},
{'name':'Richard'},
{'name':'Chris', 'age':58}
];
}
Please checkout the JSfiddle to better illustrate the issue.
I figured it out with the help of this answer. If I just add an ng-change to the textbox I can watch for an empty value and delete the property.
HTML:
<input type="text" ng-model="search.age" ng-change="clear()" placeholder="Age"></input>
JS:
$scope.clear = function(){
if($scope.search.age.length == 0){
delete $scope.search.age;
}
}
Updated fiddle. I am aware the current if prevents a user from filtering on a single space, but so far this does not seem to cause a problem for me.
BONUS: ! will return all null values and !! will return all not null values.
The cleanest solution I have found is writing a custom directive to modify the input field behaviour like this:
app.directive('deleteIfEmpty', function () {
return {
restrict: 'A',
scope: {
ngModel: '='
},
link: function (scope, element, attrs) {
scope.$watch("ngModel", function (newValue, oldValue) {
if (typeof scope.ngModel !== 'undefined' && scope.ngModel.length === 0) {
delete scope.ngModel;
}
});
}
};
});
And use it as follows:
<input type="text" ng-model="filter" delete-if-empty>
Modify the input ng-model:
<input type="text" ng-model="searchObj.age" placeholder="Age"></input>
Add this to your controller:
$scope.searchObj = {
}
And either of these will work in your html repeat:
ng-repeat="item in items | filter: searchObj.age"
Or
ng-repeat="item in items | filter: {age: searchObj.age || undefined}"
jsfiddle
You won't be able to use filter:search. Looking at the Angular code, if your obj with an undefined age gets filtered (even when the input is empty) it will fall through this switch statement and always return false. This switch doesn't get called the first time your ng-repeat is run because $scope.search.age is undefined. After your first entry into the input and clearing it out, now $scope.search.age is an empty string...so the filter will always be run.
switch (typeof obj) { ***<-- obj is undefined when you have a missing age***
case "boolean":
case "number":
case "string":
return comparator(obj, text);
case "object":
switch (typeof text) {
case "object":
return comparator(obj, text);
default:
for ( var objKey in obj) {
if (objKey.charAt(0) !== '$' && search(obj[objKey], text)) {
return true;
}
}
break;
}
return false;
case "array":
for ( var i = 0; i < obj.length; i++) {
if (search(obj[i], text)) {
return true;
}
}
return false;
default:
return false; ***<--falls through and just returns false***
}
You can try writing your own filter function, something like this.
http://jsfiddle.net/wuqu2/
<div ng-controller="ListCtrl">
<input type="text" ng-model="search.age" placeholder="Age"></input>
<ul>
<li ng-repeat="item in items | filter:checkAge">
{{item.name}} - {{item.age}}
</li>
</ul>
</div>
$scope.checkAge = function(item)
{
if($scope.search && $scope.search.age && $scope.search.age.length > 0)
{
return item.age && item.age.toString().indexOf($scope.search.age) > -1;
}
return true;
}