I have the following code when using the md-autocomplete directive in angular-material. I want to remove the md-floating-label entirely from the element if the acType != FORMULA:
html:
ng-attr-md-floating-label="{{ autocompleteFloatingLabel }}"
JS:
scope.autocompleteFloatingLabel = false;
if (scope.acType == Constants.Autocomplete.FORMULA) {
scope.autocompleteFloatingLabel = 'Add a formula here ';
}
I have tried setting the autocompleteFloatingLabel to undefined instead of false I have also tried remove the brackets in the HTML template. Nothing seems to work. I know that the scope.acType is evaluating to the proper value, but md-floating-label seems to still be there when it shouldn't be.
You could try something like this:
Give id to your autocomplete as 'autocomplete_id'
JS:
var elem=angular.element('#autocomplete_id');
elem.find('label').html('');
if (scope.acType == Constants.Autocomplete.FORMULA) {
elem.find('label').html('Add a formula here');
}
Related
I have been using bootstrap selectpicker where I've added an Add Button for user to replicate the button as much as he wants. Problem is, selectpicker is not working on the second / cloned element and values of dropdown are just showing and not changing on click.
Main Select:
<div id="main_product">
<select name="product[]" class="selectpicker" >
<option value="Tube Lights" >Tube Lights</option>
<option value="Downlights" >Downlights</option>
</select>
</div>
Clone Function:
function clone()
{
var $orginal = $('#main_product');
var $cloned = $orginal.clone();
$cloned.appendTo('#new_products');
// $cloned.find('.bootstrap-select').remove();
// $cloned.find('select').selectpicker();
}
Note that I tried to reassign the selectpicker to the cloned object which is in comments atm, because it dint work also.
Any help would be really appreciated.
I came across this problem but if using the latest version now the select is placed inside the .bootstrap-select element for html5 error handling purposes. The remove() also removes the select, a work around is:
Instead of:
$cloned.find('.bootstrap-select').remove();
Use:
$cloned.find('.bootstrap-select').replaceWith(function() { return $('select', this); });
This will replace the .bootstrap-select element with the select element that it contains inside.
function clone()
{
//you can use :
var $orginal = $('#main_product');
var $cloned = $orginal.clone();
//Or
var $cloned = $('#main_product').clone();
//then use this to solve duplication problem
$cloned.find('.bootstrap-select').replaceWith(function() { return $('select', this); })
$cloned .find('.selectpicker').selectpicker('render');
//Then Append
$cloned.appendTo('#new_products');
}
if we replace the bootstrap-select with the select then the problem is in HTML structure.
so, original element is actual bootstrap-select and cloned are normal select.
take look at following for more clarification.
instead of this
$cloned.find('.bootstrap-select').replaceWith(function() { return $('select', this); });
use
$cloned.selectpicker('refresh');
$cloned.find('.bootstrap-select:odd').remove();
You can please change clone function
function clone() {
var $orginal = $('#main_product');
var $cloned = $orginal.clone();
var $selectPicker = $cloned.find('select');
$cloned
.find('.bootstrap-select').remove().end()
.append($selectPicker).end();
$cloned.find('select').selectpicker();
$cloned.appendTo('#new_products');
}
When using in Form Sets along with other form fields you need to replace and render all the selectpicker mentioned by #cm_mehdi. First find the new form html element and apply the below code:
//Clone new form
let newForm = purchaseForm[0].cloneNode(true);
// Replace and render the cloned html selectpicker
$(newForm).find('.bootstrap-select').replaceWith(function() { return $('select', this); })
$(newForm).find('.selectpicker').selectpicker('render');
// Re-Initialize search in dropdown
$(`#id_form_formfield-${formNum}`).selectpicker({liveSearch: true});
i try to get the the value of number row selected, and print it in HTML using Angularjs, but no issue,
i have the count only when i clic in the grid column header.
The value of " selectedRowsCounter " is 0 in html, when i dosn't clic in the grid header
my code is like
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
};
$scope.gridOptions = {
rowData: null,
angularCompileRows: true,
onSelectionChanged: activeButtons,
}
there is a screenshot
i have open the same subject here
https://github.com/ceolter/ag-grid/issues/1023
i have added this line to activeButtons function and it work fine
$scope.gridOptions.api.refreshView();
i dont knew if there is a good solution, but that work for now
The problem seems to be with Angular being unaware of the $scope property change because ag-grid does not tell Angular that it has modified something in the $scope. Although it is difficult to tell if you don't show your view.
You can use onSelectionChanged the way you are using it to know how many rows have been selected, but you need to tell Angular that something has changed in its $scope by applying it.
Something like this:
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
window.setTimeout(function() {
this.$scope.$apply();
});
};
That way you can apply the $scope and the html view will reflect the changes.
I am using ng-show in below html code:
<span ng-show="show_notif_count=1" class="m-alert" id="notif_count">{{notif_count}}</span>
js code:
$scope.show_notif_count = 0;
$http.get('count/',{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
.success(function(response)
{
console.log($scope.show_notif_count);
if(response>2)
{
$scope.show_notif_count = 1;
console.log(response);
$scope.notif_count = response;
}
});
The problem is ng-show never hides the span and it always keeps on showing. I have tried using "==" instead of "=" and also other values for "show_notif_count" but either it always shows up or always keeps hiding. what could be wrong with above code?
show_notif_count=1 is set value for variable not to compare.
Update:
<span ng-show="show_notif_count=1" class="m-alert" id="notif_count">{{notif_count}}</span>
To:
<span ng-show="show_notif_count === 1" class="m-alert" id="notif_count">{{notif_count}}</span>
Note: It will hide when response <= 2, please check response again.
Can't seem to find any info on this. Is it possible to use ng-pattern on a contenteditable div? When I try it doesn't work:
<div contenteditable="true" ng-model="x.number" ng-pattern='/^(\d)+$/'>{{ x.number }}</div>
More specifically, the ng validation classes on the div element do not change when I type invalid entries.
In case anyone is wondering, I ended up adding a validation function in my controller on 'keyup' action like so:
element.bind('keyup', function(event) {
if(element.hasClass("ip-input")){
var validPattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
var result = validPattern.test(element.html());
if(result == true) {
element.removeClass("invalid-input");
element.removeClass("valid-input");
element.addClass("valid-input");
}
else {
element.removeClass("valid-input");
element.removeClass("invalid-input");
element.addClass("invalid-input");
}
}
});
This validates that an IP address field is valid.
Cheers
I'm using AngularJS with Angular UI Bootstrap.
In my template i need to show a table, i create it with an ng-repeat, I need to add a popover on click only for certain cells.
I made something like this example:
popover example inside ng-repeat in plunker
How is the better way to have the popover conditionally only in certain cells?
Check the working demo: Plunker. Only the cell with value > 5.0 will show popover (in green background color).
Define a function on the $scope:
$scope.filterCells = function (v) {
return v > 5.0 ? 'mouseenter' : 'none';
};
And the td HTML:
<td data-ng-repeat="v in getRowData(row)" class="zscore"
ng-class="{'show-popup': filterCells(v)}" popover="{{zscores[row][$index]}}"
popover-trigger="{{ filterCells(v) }}"
popover-append-to-body="true" popover-title="zScore">
{{ v | number:1 }}
</td>
Angular 8.2.0 + ng-bootstrap and the Ngb Popover directive
I came across this question while trying to fix my issue, so I'm including my solution here.
I had an issue using the triggers property to conditionally show/hide popovers. It turns out that the triggers value is consumed by the popover in ngOnInit, so it does not show/hide the popover after the component is already initialized.
I found that ngbPopover has a property called disablePopover that accomplishes what I need instead of using triggers.
https://ng-bootstrap.github.io/#/components/popover/api
Before
HTML
<div
ngbPopover="Hello, World!"
[triggers]="triggers">
</div>
TypeScript
private readonly TRIGGERS_ENABLED = 'mouseenter:mouseleave';
private readonly TRIGGERS_DISABLED = 'none';
public triggers = TRIGGERS_DISABLED;
someEvent() {
if (someConditional) {
this.triggers = TRIGGERS_DISABLED;
} else {
this.triggers = TRIGGERS_ENABLED;
}
}
After
HTML
<div
ngbPopover="Hello, World!"
triggers="mouseenter:mouseleave"
[disablePopover]="disablePopover">
</div>
TypeScript
public disablePopover = true;
someEvent() {
if (someConditional) {
this.disablePopover = false;
} else {
this.disablePopover = true;
}
}