I need to convert below code to dynamic code using angular directive or any other angular way.
one Directive:
<view-partial></view-partial>
view-partial.html
<div id="layoutFormation">
<div ng-repeat="container in layoutJSON.layoutInfo.containers" class="row form-container x_panel tile">
<div class="x_title nopadding"><label class="container-header">{{(container.headerText == " ") ? "" : container.headerText }} </label></div>
<div number-of-rows="{{ container.table.numOfRows }}" number-of-columns="{{ container.table.numOfColumns }}" class="x_content col-md-12 col-xs-12 collapse-expand">
<div ng-repeat="columnNumber in range(container.table.numOfColumns)" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 column">
<binding-control-block ng-repeat="rowNumber in range(container.table.numOfRows)" row-number="{{rowNumber}}" column-number="{{columnNumber}}" style='margin-bottom: 12px;' />
</div>
</div>
</div>
</div>
Here binding-control-block is another directive that directive with binding code already i'm doing in dynamically. Only thing the above partial page also i need to convert dynamically. I think I have to add all the above view-partial code in another directive. just i need any example or idea how to create directive with binding expression. Please any one help me to achieve this. If any clarification need please message me. Thanks in advance.
Related
This question already has answers here:
Is it possible to use AngularJS with the Jinja2 template engine?
(2 answers)
Closed 6 years ago.
I'm using ng-repeat for getting my url dynamically and using ng-src to bind that url through angularjs.
Here's the code
<div class="x_panel" ng-repeat="data in allreviewdata|filter:search">
<div class="x_content">
<div class=" review-panel">
<div class="row"style="margin-bottom:30px;" >
<div class="col-lg-4">
<span ng-bind="data.Channel"></span>
<span class="name_date" style="font-size:10px; font-color:#DCDCDC;" ng-bind="data.Date">date</span>
</div>
<div class="col-lg-4 pull-right"style="text-align:right;" ng-bind="data.Sentiment">
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" style="text-align:center;">
<img ng-src="data.pic_url" alt="logo" width="100px;"class="review-panel-logo">
</div>
But I was unable to get the proper url. I had also used {{data.pic_url}} but its giving error. Also its giving this error
error
Can anybody has the solution for this ?
Thank you in advance ..!
Use in this way
<img ng-src="{{data.pic_url}}">
You need to have like this,
<div ng-controller="myCtrl">
<img src="http://{{data.pic_url}}"/>
<img ng-src="http://{{data.pic_url}}"/>
</div>
DEMO
My requirement is when I clicked on start button one of the Div content must be changed to "in Progress" and the value="start" must changed to value="Complete", now when I click on "complete button" the div content must changed to Completed and this complete button must be hidden.
I can achieved some of the requirement by Jquery, but I want to implement it by Angular JS. First of all I should know How can I read button value="start" in controller of angular Js. Below is my code.
<div class="row" style="margin:0% 20% 2% 10%;">
<div class="col-lg-2 col-sm-12 text-center">
18/5/2015
</div>
<div class="col-lg-2 col-sm-12 text-center">
eureQa
</div>
<div class="col-lg-2 col-sm-12 text-center">
Int-1
</div>
<div class="col-lg-2 col-sm-12 text-center" id="status">
Pending
</div>
<div class="col-lg-2 col-sm-12 text-center">
</div>
<div class="col-lg-1 col-sm-12 text-center" >
</div>
</div>
Use ng-click to set a scope variable or fire a controller function which sets a scope variable that is watched by ng-show. ng-show and ng-hide are responsible for showing/hiding dom elements.
$scope.buttonName = 'start';
onload Declare a value for button and in trigger change value for the
{{buttonName}}
$scope.buttonName = 'tempName';
You don't need to set the value at all. ng-model takes care of it,
Add $scope.value and replace value when you required
I am implementing a control to display a list of comments, with AngularJS + Bootstrap.
It's something like this:
<div class="comments">
<div ng-repeat="(id, comment) in person.comments" class="row">
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon vertical-align-top">
<div><i>Date:</i> {{ comment.date }}</div>
<div><i>By:</i> {{ comment.author }}</div>
</span>
<div class="form-control form-control-content">
{{ comment.content }}
</div>
</div>
</div>
</div>
</div>
</div>
Everything's o.k..
The problem is: comment.content is HTML data (for example it contains line-breaks, hyperlinks, style-formatting, ...). By default HTML is rendered as plain text.
The question is: how do I display data as HTML inside a div?
You can use ng-bind-html.
<div class="form-control form-control-content" ng-bind-html="comment.content"></div>
If you want {{comment.content}} to be interpreted as HTML, you need to look at ngBindHtml directive.
So you'd need to modify it:
<div ng-bind-html="comment.content" class="form-control form-control-content"></div>
You'll have to add $sanitize into your project dependencies, as is noted in the ngBindHtml doc link above.
Waves is from here.
http://fian.my.id/Waves/
To add the wave effect, you just have to add the JS and CSS files, then add class="waves-effect waves-button" to the component of your choice, and call Waves.displayEffect();.
Unfortunately, it looks like the angularJS ng-repeat breaks this. There are no errors in the console.
This works:
Click Here
<div class="col-md-4 col-sm-6 garment" ng-repeat="garment in buypage.garments">
</div>
This doesn't:
<div class="col-md-4 col-sm-6 garment" ng-repeat="garment in buypage.garments">
Click Here
</div>
Edit
Moving Waves.displayEffect(); inside controller did not fix it.
Solved
HTML:
<div ng-repeat="garment in buypage.garments" ng-init="initWaves()">
...
</div>
In AngularJS Controller:
$scope.initWaves = function(){
Waves.displayEffect();
}
this seems like a simple problem but it has taken hours of mine .
I've the following code.
<div class="row grid" id="draftRow{{$index}}" ng-repeat="draft in drafts">
<div class="col-md-7 cell" ng-bind="draft.getTitle()"></div>
<div class="col-md-2 cell center" ng-bind="draft.getUserName()"></div>
<div class="col-md-2 cell center" ng-bind="draft.getDate()"></div>
<div class="col-md-1 cell center" >
<span class="gridbutton" ng-click="editPost(draft.getPostID())">edit</span>
|
<span class="gridbutton" ng-click="deletePost(draft.getPostID(),'{{$index}}')">delete</span>
</div>
</div>
The deletePost function is not being called onclick although I can see deletePost(draft.getPostID(),'0') written on browser inspect element. What is the problem here can anyone point out ? If I remove the second parameter of the deletePost function everything runs fine .
I've also tried $parent.$index , that calls the function but doesn't output the rowIndex on inspect element.
As I said in my comment: instead of using {{...}} for interpretation, just use the variable itself: deletePost(draft.getPostID(), $index)