I'm trying to change popover's content dynamically binding 'uib-popover-title' with 'dacc.getSearchResultHTML()' function, but updating 'dacc.codeJerarchy.parent' object just changes popover's title.
I'm missing something or do i need to redefine the HTML element? Its the only way i achieved to update the content for the moment.
Thanks!
<button uib-popover-html="'{{ dacc.getSearchResultHTML(dacc.codeJerarchy.parent) }}'"
popover-title="{{ dacc.codeJerarchy.parent.short }}"
popover-placement="right"
popover-append-to-body="true" type="button"
class="btn btn-sm btn-default">i</button>
//-------------------------------------------
dacc.getSearchResultHTML = function(searchResult) {
return $sce.trustAsHtml(he.encode(he.escape(searchResult.long)).replace(/\n/g, '<br />'));
};
uib-popover-html takes an angular expression, it's unnecessary to wrap your function call with double curly braces. Instead, pass in a variable/function on the $scope object.
HTML
<button type="button" class="btn btn-sm btn-default"
uib-popover-html="dacc.getSearchResultHTML(dacc.codeJerarchy.parent)"
popover-title="{{ dacc.codeJerarchy.parent.short }}"
popover-placement="right"
popover-append-to-body="true"
>
i
</button>
Controller
$scope.dacc = {
getSearchResultHTML: function(input) {
...
return output;
}
}
Related
I am using ngTable with filters.
How can I clear the filters values by clicking on one button?
I thought that $scope.tableParams.reload(); would reset the filters but apparently it's not the case.
Thank you
Like so: $scope.tableParams.filter({});
You can clear the filters supplying an empty object ({}) to the filter() method of tableParams instance.
Look below inside the ng-click directives:
If you are using controller as syntax:
In controller:
this.tableParams = new NgTableParams(tableSettings, tableParams);
In view:
<div ng-controller="demoCtrl as demo">
<button class="btn btn-primary pull-right"
ng-disabled="!demo.tableParams.hasFilter()"
ng-click="demo.tableParams.filter({})">
Clear filters
</button>
</div>
If you are using controller with $scope syntax:
In controller:
$scope.tableParams = new NgTableParams(tableSettings, tableParams);
In view:
<div ng-controller="demoCtrl">
<button class="btn btn-primary pull-right"
ng-disabled="!tableParams.hasFilter()"
ng-click="tableParams.filter({})">
Clear filters
</button>
</div>
I have this row:
<a class="btn btn-default btn-xs" ng-click="list.showReview = list.showReview == $index ? -1 : $index; getValues(object.Id); "><i class=" glyphicon glyphicon-list-alt"></i></a>
I want getValues() method in controller to be called only if list.showReview
variable true.
Any idea how can I implement it?
P.S. can I use if else statement in HTML ?
Assume list.showReview is a boolean variable. Then you can try this
<a class="btn btn-default btn-xs" ng-click="list.showReview && getValues(object.Id)"><i class=" glyphicon glyphicon-list-alt"></i></a>
You could make it a button and apply the ng-disabled directive. If list.showReview is true, then ng-disabled will make the button disabled, see below.
<button class="btn" ng-disabled="list.showReview" ng-click="getValues(object.Id); "><i class=" glyphicon glyphicon-list-alt"></i></button>
In general, I would suggest moving your logic for whether or not getValues() is executed inside your controller. You'll end up polluting your html templates if you continue to put excess logic inside them.
i want to change class btn-white to btn-primary for the selected Button
$scope.SelectedCombination = function (combinationId) {
$scope.selectedCombination =combinationId;
};
html
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId)" type="button">{{combination.name}}</button>
use ng-class.don't use any javascript function to set css.
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);clicked=true;" ng-class="{btn-primary:clicked}" type="button">{{combination.name}}
</button>
or you can use best approach:
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);" ng-class="{'btn-primary':selectedCombination==combination.combinationId}" type="button">{{combination.name}}
</button>
see plunker
There is something called Ng-Class. Ng-class,allow you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.class
I want to execute a function when the value of the select element changes (the select element in angular-strap is html tag)
My HTML:
<button type="button" class="btn btn-default" ng-model="selectedCriteria" data-html="1" ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
Action <span class="caret"></span>
</button>
My JS:
$scope.selectedCriteria = "Location";
$scope.selectChoices = [{'value':'Location','label':'<i class=\'fa fa-map-marker\'></i> Location'},
{'value':'Age','label':'<i class=\'fa fa-male\'></i> Age'}];
I tried putting an ng-click directive with a function in the controller but it captures the value of the current selected value on click not when the element changes
Thanks
There are a couple of options one is using ngChange Reference
The other is using $watch. See the $watch section of the scopeapi reference
An example using watch (this would be in your controller)
$scope.$watch('selectedCriteria', function() {
$scope.SomeFunction();
});
An example using ngChange
<button type="button" class="btn btn-default"
ng-change="SomeFunction()"
ng-model="selectedCriteria" data-html="1"
ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
Action <span class="caret"></span>
</button>
I've got a button linked to a UI Bootstrap
Collapse directive if I click on it
the script show a form to reply a comment.
when the form is showed I want to hide the button
but I've got a strange behavior
this doesn't work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-if="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
this work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-show="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
and I don't really know why !
Can you enlighten me, please ?
This is expected because ng-if creates new child scope and isCollapsed property is created in it on the first click. But ng-if itself is looking at the parent scope.
Try using toggle() function declared on controller level for ng-click
$scope.toggle = function () {
$scope.isCollapsed = !$scope.isCollapsed;
};
Consider using the rule:
Treat $scope as read only in templates.