Angular ui.bootstrap.buttons not updating after element remove - javascript

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

Related

Why do my inputs on the page disappear after refreshing the page, but the inputs are saved in local storage in the console?

link to my web application: https://malekmekdashi.github.io/work_day_scheduler/
link to my github repo: https://github.com/malekmekdashi/work_day_scheduler
I cannot seem to solve this issue that I'm having. My goal is that whenever I refresh the page after inputting some values in the text box, the values will remain on the page along with local storage. However, I am unable to do so. If someone can be so kind as to help me solve this issue, I would greatly appreciate it. Here is a little example of the code that I'm working with
HTML:
<div class="row time-block" id="1">
<div class="col-md-1 hour" id="1">9am</div>
<textarea class="col-md-10 description" id="inputValue"></textarea>
<button class="saveBtn col-md-1"><i class="fa fa-save"></i></button>
</div>
Javascript:
$('.saveBtn').on('click', function() {
var inputValue = $(this).siblings('.description').val();
localStorage.setItem("inputValue", inputValue);
});
$('inputValue .description').val(localStorage.getItem('inputValue'));
Your selector is wrong in two ways.
Like in the comments already said: Your return will be an array. You have multiple ids inputValue with class description.
You want to select id inputValue, which means you need to use #inputValue. Also you need to combine them by leaving out the whitespace otherwise you search for childrens. Correct jQuery would be $('#inputValue.description')

Question about checkbox and radio buttons

I'm using element-ui and I have no idea how to make it work. I have the following code:
<div v-for="(solution, s_index) in scope.row.arrayDefectiveActions"
:key="`${requirementTemplateTypeIndex}.${requirementExtendedItemIndex}.${s_index}`"
style="display: inline-block;" class="p-sm">
<el-checkbox v-model="solution.checkActionTaken"
:disabled="!scope.row.checkDefectiveItem"
#change="articleChanged(requirementExtendedItem)">
</el-checkbox>
</div>
My question is how can I transform this checkbox into radio buttons, because I tried to use the exact same code but changed only the checkbox and I can select all of them without unchecking the others
You must add :class="{'active':radio===item.id}" to the v-for iterator and use <el-radio v-model="radio" :label="item.id">.
Here you can find a working example.
Best regards,
Brhaka
Have a look to the documentation on how to use the proper component.
el-checkbox is for checkboxes
el-radio for radios
Documentation: https://element.eleme.cn/#/fr-FR/component/radio

How can I get dynamically input field id in jquery on button click and save to another button.

I am totally fresher in JavaScript and jQuery can anyone help me or suggest regarding this task how can I do this.
I have a task, I want want get dynamic id of input field on button click, I have 100 dynamic input field
<input id="ProgressBar_1" type="text" name="dProgressBar_1" class="form-control bulk-pricing-streetProgressBar">
<input id="ProgressBar_2" type="text" name="dProgressBar_2" class="form-control bulk-pricing-streetProgressBar">
these are my id's, I want to get these id's on button click there code I have mention below.
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id=" "></button>
Finally I want store these getting id's in another button.
<button id="" class="btn btn-danger handleIncorrectNoBtn" type="button">Remove House</button>
Finally I Want to perform some task on this button.
Ill give you a couple of hints, though i find it very hard to fully understand what you are trying to achieve here. Maybe rewrite your question, provide some specifics and be more clear if possible.
[From what i understand]
your first part is a button that when clicked will retrieve the ids of input fields?
lets say this is your button:
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id="myButton"></button>
the click code would look similar to (i'm kind of pseudo coding this af you have provided no example or demo i can use to test, my apologies if this is not correct):
function {
var ids = [];
$('#myButton').on('click', function() {
ids = [];
$("input .classOnAllInputIdsYouWantToGet").each(function(e){
ids.push(e.attr("id"));
});
// store in a variable here or continue using the ids variable
// created above - this can be used anywhere within this function
});
function myOtherFunctionINeedIds(){
// Use ids here
}
}
im not sure if this is what you are after, if not please update or amend your question and i will change my answer to try get exactly what you are after.
good luck.

can't get Angular ui-grid last row

is there a way to apply a specific template only to the last ui-grid 's row?
I triyed doing that using <div ng-show="grid.renderContainers.body.visibleRowCache.indexOf(row)==gridOptions.data.length-1"> but it seems not to be working :(
Am I missing something?
if I just replace gridOptions.data.length-1 by a number it works correctly
here is a plunker
cellTemplate:'<div ng-show="row.rowIndex==$scope.gridApi.grid.options.totalItems"><button class="btn primary" ng-click="grid.appScope.showMe()">Click Me</button></div>' }

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

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.

Categories

Resources