How to update a column with a single button in AngularJS? - javascript

I have an Unapproved button on my list page. As I'm a complete rookie with angular, I don't really see how to pull out the id of the given post and update the column in db that makes sure it becomes approved. Can you please show me how to do that? The code goes smthn like this:
<form class="form-horizontal">
<button ng-click="approved()" class="unapproved" ng-if="article.current_revision.approved == false" ng-model="article.current_revision.approved">Unapproved</button>
</form>
What should I put in my controller to make this work?

It should be something like this where your controller has the approved fn which accepts the id.
ng-click="approved(article.id)"
Did I correctly understand your question? If not, please elaborate. A jsFiddle always helps tremendously too.

Related

Intercooler.js - ic-target reloads intercooler-code and then is not working anymore

I am using intercooler.js in a django project.
http://intercoolerjs.org
<div id=right_side>
<form ic-post-to="{% url 'update-task-ajax' %}" ic-target="#right_side">
[...]
</form>
</div>
The form itself gets reloaded in the div #right-side after the first (working) use and after that intercooler is not working anymore. How to fix this?
Update:
Looks like i have to use
Intercooler.ready(func(elt))
http://intercoolerjs.org/reference.html
But i'm stuck how to use it properly.
I don't see anything wrong about this, the form should keep submitting and targeting #right_side each time, unless you are replacing it somehow. I don't see why Intercooler.ready() is necessary, given the code. Can you clarify what are trying to accomplish?
I'm availabe on the gitter chat for intercooler to help:
https://gitter.im/intercooler-js/Lobby

if and elseif json, angular

right now i'm trying to finish a task in our project . to explain the situation i have field with iteams im must choose an iteam then another field appear and must choose again other elements. those element i want to send them using json
for exemple:
base:'the element of the first field'
headers:'the elements ot the second field'.
when i use if and else if the operation stop after if and i dont know why.
this is the code i usedenter image description here.
thanks a lot of any help .
Actually you need to just to implement *ngIf Directory
Like I write example code below of button example
<input type="button" (click)="textBox=false">
<input type="text" placeholder="enter text" *ngIf="!textBox">
And if you again get problem after this code then please post sample code...
Thanks

How can you use a spring form tag to assign an html value to a variable using jquery/javascript?

I have a drag and drop UI. Its like a bucket list. What I have done is I have seperated the forms and the UI html for easier data manipulation. I have an empty form like this: (Take note that I am using spring form tags "form:")
<form:form method="POST" id="sampleForm" commandName="sampleForm" modelAttribute="sampleForm" class="navbar-form navbar-center">
<table id="formToBeSaved">
</table>
</form:form>
And then I have a script that is triggered whenever my other sortable receives an item. Sample below:
$("#sortable2").sortable({
connectWith : "#sortable2 ul",
scroll: false,
receive: function(event,ui) {
var saveElement = '<tr id="saveRow['+statusCounter+']"><td><form:input type="hidden" '+
'path="sampleFormModel['+statusCounter+']." class="form-control" '+
'id="name['+statusCounter+'].sampleForm" value="'+ someValue +'"></form:input></td></tr>'
console.log(saveElement);
$("#formToBeSaved").append(saveElement);
statusCounter = statusCounter + 1;
console.log(statusCounter);
};
},
Now the problem is, whenever I submit the form thru ajax an error occurs. It seems that the system does not recognize my < form:input > tag (since I am using spring) because I've just assigned it as a string into a variable. Is there a way to fix this? Thanks stackoverflow community!
You are using Spring XML templates, but the web browser can only work with HTML. This works when you are declaring your code in JSP files because Sprint will parse them and transform them to HTML.
So instead of manually adding JSP to the document, you should edit your JSP files in a way they generate the JSP you expect. In this case, you could use <c:forEach> to generate each <tr>. This answer could help you to do that.
If you only have access to the datas required by these <tr> dynamically, I do not know Sprint enough to help you. Maybe you could find some resources on this question.

Using AngularJS code in template property of kendo window

I am using kendo window with AngularJS in the following way.
HTML Code
<div kendo-window="showProspectDetailWindow" k-title="'Prospect Detail window'"
k-width="" k-height="" k-visible="false"
k-content="{template:confirmationWindowTemplate}"
k-on-open="" k-on-close=""></div>
JavaScript Code
$scope.confirmationWindowTemplate = 'Are you sure you want to delete?<br />This data will not be recoverable, do you want to continue ?<br /><div class="pull-right"><button class="k-primary" ng-click = "yesButton()">Yes</button><button class="k-button" ng-click="noButton()"> No</button></div>';
I have created a model in the script in the following way
$scope.createProspectDetailModel = function(data)
{
$scope.prospectDetail.AccountId = data.AccountId;
$scope.prospectDetail.BusinessType = data.BusinessType;
$scope.prospectDetail.FirstName= data.FirstName;
}
The above code works. With the help of debugger I can verify that the values from the data field are going into each of the $scope.prospectDetail value. However, when I change my template into
$scope.confirmationWindowTemplate = 'Are you sure you want to delete {{prospectdetail.FirstName}}'
It doesn't work. I also tried
$scope.confirmationWindowTemplate = 'Are you sure you want to delete {{#= prospectdetail.FirstName #}}'
but it doesn't work as well. I have referred this link on SO but didn't help. I have searched a lot but still cannot find the solution to this. Any help would be appreciated.
Ok. I found the answer myself. I changed the HTML Code . Removed the k-content
<div kendo-window="confirmationWindow" k-title="'Confirmation window'"
k-width="" k-height="" k-visible="false"
k-on-open="" k-on-close=""></div>
and assigned it in the script
$scope.confirmationWindow.content('Are you sure you want to delete'+ $scope.prospectDetail.FirstName '?<br />

Angular ui.bootstrap.buttons not updating after element remove

I have a set of Radio-bottoms, that is driven off a Array. for a Multi-Choice answer setup.
<div ng-repeat="option in options">
<div>
<button type="button" style="min-width: 100px" class="btn btn-default" ng-model="question.answer" btn-radio="'{{option.option_id}}'">{{option.option_text}}</button>
</div>
</div>
When I add to the array, things are good, mainly since the preset answer is lower than the new element in Options.
If I then delete one of the Options above the answer, and redefined the new Answer id.. the Radio buttons are not updated correctly. I know the answer is updated as I have it displayed on the screen. but the buttons are not updated.
UPDATE NEW PLUNKER!
I have done a plunker : http://plnkr.co/edit/2XWFwClewqtcXWPY8ZSK. As you can see if you select the different options the answer follows.. Now if you select the third option and remove the first or second option you will see that the answer will update but the check buttons is not updated right.
Can someone shed some light on this ?
Thanks in advance
Kim
With some genouros help from the ui team did I find that it was a simple type casting error.
$scope.cp.options[i].option_id = i + 1;
Should be
$scope.cp.options[i].option_id = "" + (i + 1);
I have updated the plunker if anyone need the full sample. Here

Categories

Resources