I am using ng-repeat for multiple child directives. On the first instance of the child directive, I want to set the attribute 'doAutofocus' to true. When I try my code below, I get a parsing error.
Error: $parse:syntax Syntax Error
My directive 'tradePanel', has a scope of {trade: '=', doAutofocus: '='}
When my ng-repeat $index == 0, I want the doAutofocus to be true, else false.
I use blade templates on the server side which use {{ }}.
For angularjs templates, I am using:
$interpolateProvider.startSymbol('{%');
$interpolateProvider.endSymbol('%}');
How do I get my doAutofocus attribute set correctly for my first instance?
<div class="row">
<div class="col-xs-12 col-sm-12 col-sm-6" ng-repeat="trade in deal.trades">
<trade-panel trade="deal.trades[$index]" ng-attr-do-autofocus="{% ( $index === 0 ) ? true : false %}"></trade-panel>
</div>
</div>
Since you are using two-way binding for your doAutofocus directive scope attribute, you cannot use interpolation here. Simply write the expression you wish to pass to the directive. This has to be an existing value on the parent scope. Since we are inside ng-repeat block you can just use the provided $first variable:
<div class="col-xs-12 col-sm-12 col-sm-6" ng-repeat="trade in deal.trades">
<trade-panel trade="trade" do-autofocus="$first"></trade-panel>
</div>
Related
I have a directive and it works fine in a way such that when I type something the search() scope function inside my directive fires and sets $scope.query with the input text.
here is the directive template
<div class="container">
<div class="system-filter-header">
<div class="no-gutter">
<div class="system-search-wrapper search-wrapper-width">
<i ng-click="search($evt)" class="fa fa-search"></i>
<input type="text" ng-keyup=search($evt) class="search pull-left suggesstions-styles"
ng-model="query" ng-attr-placeholder="Search...">
</div>
</div>
</div>
</div>
here is the scope function which gets triggered
$scope.search = function() {
console.log($scope.query.length)
}
But when I used an ng-if="true" in first line of template (true used for generalizing only, I want to do a different conditional check inside ng-if) such that,
<div class="container" ng-if="true">
still the search gets triggered but the console.log gives always 0 and it doesn't seem to update the $scope.query value as it stays as $scope.query = ''
throughout the typing.
EDIT
Here is a an example codepen with almost similar behaviour. The problem is with the searchBox directive and I have added ng-if=true to the template but searching doesn't work. When I remove the ng-if searching works fine.
Any reason for this?
Rule of thumb in AngularJS: your ng-model should always include a dot. Otherwise AngularJS directives that create child scopes (like ng-if or ng-repeat) will create a duplicate property on that child scope instead of the parent scope. Following the controllerAs convention completely mitigates this behavior.
I was wondering if it is possible to have an ng-if be true if an element has a certain class.
Example:
<div class="edge" ng-repeat="item in items">
<div ui-view ng-if="(ng-repeat div has class of edge)"
Practically you can use hasClass method with angular element:
angular.element(myElement).hasClass('my-class');
So you can create a function and put the check in it and use that function in ng-if.
<div class="edge" ng-if="check()" ng-repeat="item in items">
However, remember that you cannot access the element in ng-if (vs you can pass the $event to ng-click and access $event.target) , need to create a directive to do it.
I have an item in my array that is true or false.
I use this to say
<div ng-show="{{ item.isDirectory }}">
I also want to use the same rule to apply a class to that div if item.isDirectory == true
First, it's incorrect:
<div ng-show="{{ item.isDirectory }}">
ngShow waits an expression, it works just as below:
<div ng-show="item.isDirectory">
Also, preferably use ngIf directive as a good practice.
To apply a class in your div based on a condition, you should use ngClass directive:
<div ng-class="{ 'yourTrueclass': item.isDirectory, 'yourFalseClass': !item.isDirectory }"></div>
Take a look on this tutorial.
Is it possible for me to have multiple array for $scope?
i have a list of div with child scopes that is generated from a parent scope in ng-repeat. How can i have the scope variable individually unique?
I am generating a list of ng-repeat in another ng-repeat.
<div ng-repeat="" ng-init="hide=true" ng-click="hide=!hide">
<div ng-hide="hide" ng-init="childhide=true" ng-click="childhide=!childhide">
<div ng-repeat="" ng-init="childhide" ng-hide="childhide">
<div>{{ variable }}</div>
</div>
</div>
</div>
How can i have the variable unique? Coz each time when i click on either one div, all div with childhide variable will show. Anyway to make them behave individually?
Thanks.
To get a new $scope for each div, the first ting that comes to mind is to create another directive and specify which type of scope you want.
<div class="container">
<div ng-repeat="item in items"></div>
</div>
will become:
<div class="container">
<inner-directive ng-repeat="item in items"></inner-directive>
</div>
then in inner-directive:
app.directive('innerDirective', function () {
return {
restrict: 'E',
template: '<div></div>', // this replaces what you had before
scope: {}
};
});
This will create an isolate scope, which does not inherit properties from it's parent.
There are a couple of other scope options but i cant remember off the top of my head what each one does. Easy to read in the docs though.
I am trying to ng-click assign a variable (success) inside an ng-repeat and then use that value outside of the ng-repeat(failure) as follows:
<div class="stocksNav col s1">
<div class="myStockList" ng-repeat="stocksInPortfolio in ctrl.myPortfolio.stocksInPortfolio">
<ul>
<li style="position: relative"><a href ng-click="ctrl.tab = stocksInPortfolio.stock._id">{{stocksInPortfolio.stock.name | limitTo:10}}</a></li>
</ul>
<div class="myStockView" ng-show="ctrl.tab === stocksInPortfolio.stock._id">
<div class="{ active:ctrl.tab === stocksInPortfolio.stock._id }">
</div>
</div>
</div>
</div>
<div ng-include="'/app/dashboard/partials/myIndividualStock.html'"></div>
the partial wants to then call ctrl.tab to use it's click event assigned values, such that if i ng-click on any other instance of the ng-repeat function the ctrl.tab variable will reassign, but the ctrl.tab assignment does not persist outside of the ng-repeat div. any thought?
The ng-repeat directive (as many other directives) creates a new scope, and to access a parent's scope variable, it needs to be an object. In other words, instead of ctrl.tab, initialize a object $scope.something = {} in your controller, then use ctrl.something.tab in your template (replace something with a name proper to your application).