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)
Related
I'm pretty sure this one is silly but I can't seem to figure it out myself.
This is a Django website containing a little bit of Javascript.
In my HTML, I have a button that should send a few values to a Javascript function. The javascript function should then find and update some divs in the HTML.
The strange thing is that the value assigned to the setAttribute statement is automatically also used for the following innerHTML statement (overruling whatever was configured there).
HTML Button:
<button class="btn btn-outline-dark" onclick="monthStats(
{{simple_total_monthly_sent_volume}},
{{average_monthly_delivery_rate}},
{{average_monthly_unique_open_rate}},
{{total_monthly_unique_open_volume}},
{{average_monthly_unique_click_rate}},
{{average_monthly_rejection_rate}},
)">Month</button>
Javascript:
function monthStats (sentvolume,
deliveryrate,
uniqueopenrate,
uniqueopenvolume,
uniqueclickrate,
rejectionrate
) {
document.getElementById("sent").innerHTML = (sentvolume).toLocaleString("en-US");
document.getElementById("delivered").innerHTML = deliveryrate+"%";
document.getElementById("uniqueopened").innerHTML = uniqueopenrate+"%";
document.getElementById("uniqueopened").setAttribute("title", uniqueopenvolume.toString());
document.getElementById("uniqueclicked").innerHTML = uniqueclickrate+"%";
document.getElementById("rejected").innerHTML = rejectionrate+"%";
}
HTML divs that should get updated:
<div class="container">
<div class="row">
<div class="col">
<div id="sent" class="keymetric">{{simple_total_monthly_sent_volume|intcomma}}</div><div class="text-muted keymetricexplanation">sent volume</div>
</div>
<div class="col">
<div id="delivered" class="keymetric">{{average_monthly_delivery_rate}}%</div><div class="text-muted keymetricexplanation">delivery rate</div>
</div>
<div class="col">
<div id="uniqueopened" class="keymetric" data-bs-toggle="tooltip" data-bs-placement="top" title="{{total_monthly_unique_open_volume|intcomma}}">{{average_monthly_unique_open_rate}}%</div><div class="text-muted keymetricexplanation">unique open rate</div>
</div>
<div class="col">
<div id="uniqueclicked" class="keymetric">{{average_monthly_unique_click_rate}}%</div><div class="text-muted keymetricexplanation">unique click rate</div>
</div>
<div class="col">
<div id="rejected" class="keymetric">{{average_monthly_rejection_rate}}%</div><div class="text-muted keymetricexplanation">rejection rate</div>
</div>
</div>
</div>
Clicking on the Month button in the HTML results in the title and textvalue of the div with ID "uniqueopened" to be updated correctly by the Javascript. However, the setAttribute statement in the javascript is seemingly also updating the value of the following div with ID "uniqueclicked", overruling the Javascript statement targeting that div.
I'm still not sure what caused the original problem. But could solve my issue by using an alternative approach: instead of pushing all the values to one single javascript function, I created a separate javascript function that does only the setAttribute updates.
Hi , I am uploading documents along with some key word as you can see in the diagram.Here is the code for for inserting key words into the panel which is formed inside a div.
<div class="tagListForDocument col-xs-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">{{'TAG.TagsForDocument' | translate}}</div>
<div class="panel-body btn-group-vertical" role="group" aria-label="available tags">
<button ng-repeat="tag in ul.tagsForDocuments" ng-click="ul.removeTag(tag)" class="btn btn-flat">
<span class="icon-remove"></span> {{tag.name}}
</button>
</div>
</div>
</div>
As you can see the keywords are formed ({{tag.name}}) based on iteration of ul.tagsForDocuments array.
Now my problem is that I want to remove all these keywords once the uploading is finished.That means before uploading second time the panel should be empty. But dont know the efficient way of doing this. How can I reload this particular part of html with empty ul.tagsForDocuments array.
In your controller you can do:
ul.tagsForDocuments = [];
which will make the array empty. Angular will then update the view accordingly.
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.
New to Angular, so far loving it. I've come so far in creating a list of thumbnails. I've added 3 sort buttons order the thumbnails by 3 different data values. All works great but to make it a little more less confusing for the user I would like to reset/turn of ordering for one data set when another order button is clicked. EG - https://jsfiddle.net/5wayfc4z/
From the fiddle you will notice when you click on country its becomes orederd by "country" when you then click on "a-z" it will sort the data by attraction but the "country" sorting will be still showing - to turn this off I need to click on country again. I only want to sort one field one at a time if that makes sense?
<div id="buttons" class="row">
<div class="col-sm-6 col-md-4">
a-z
</div>
<div class="col-sm-6 col-md-4">
Country/State
</div>
<div class="col-sm-6 col-md-4">
type of attraction
</div>
</div>
<article>
<div class="row">
<div ng-repeat="selfieObj in sticks | filter:searchAttraction | orderBy:predicate:reverse">
<div class="col-xs-12" ng-show="newGrouping($parent.sticks, 'country', $index);">
<h2 ng-show="villa">{{selfieObj.country}}</h2>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img ng-src="{{selfieObj.mainImage}}" alt="{{selfieObj.attraction}}" title="{{selfieObj.attraction}}">
<div class="caption">
<h3>{{selfieObj.attraction}}</h3>
<p class="text-center">
{{selfieObj.answer}} {{selfieObj.info}}
</p>
</div>
</div>
</div>
</div>
</div>
</article>
EDIT:
https://jsfiddle.net/5wayfc4z/ new fiddle to take away the styling so it does not confuse.
To see my issue click on "country/state" - you will see the filter work by sorting by country and adding the country name. Then click on "a-z" this works BUT you will notice the filter for "country/state" is still in effect - in order to remove the "country/state" you have to click that filter button again.
The sorting seems to work fine in your fiddle, so is this just a visual issue?
Just remove the initial states from the buttons:
class="btn btn-primary btn-block"
instead of adding active or inactive by default.
I have forked your fiddle with the fix: fiddle
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