How to refetch a scope value in view using angularjs - javascript

First of all sorry if my title doesn't quite explain my problem. I have a form which is create a set of question dynamically. In the code below I use ng-repeat="opt in q.options" and I have a button which add a new option.
My view code
<div>
<label for="">Options: </label>
<a ng-click="addOption($event, $index)">
<i class="icon-plus-sign icon-large"></i> Add option
</a><br /><br />
<div ng-repeat="opt in q.options">
<label><span>{{opt.id}}.</span></label>
<input type="text" ng-model="opt.text" placeholder="Add new possible answer here.">
<a ng-click="q.options.splice($index,1)"><i class="icon-remove-sign icon-large"></i></a>
</div>
</div>
<div>
<label for="required_credit">Answer: </label>
<select id="city" ng-options="c for c in options">
</select>
<!-- <ul>
<li ng-repeat="opt in q.options">{{opt.id}}</li>
</ul> -->
What I want is to reuse q.options in my select tags but it the problem is it doesn't populate. I've used ul li tags then ng-repeat="q.options" and it worked but I want to use it using the select tags.
PS: The reason why I want to use the same model is to simply get the appended data which I inserted dynamically.
For instance:
I have 2 input buttons and I add a new input button
Since I'm using the same model my select option would then be updated then it would have 3 options as well.

Accordingly the ngSelect documentation, ng-model is a required parameter for ngSelect. I believe, you want to store your selected value somewhere ;)

Related

To disable all radio buttons if anyone of them is clicked in angularjs ng-repeat

what i am trying to do here is, i have an ng-repeat in a form and if i click anyone of those input buttons corresponding all buttons get disabled
<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
<hr>
<p>Q. {{question.questionText}}</p>
<form >
<div ng-repeat=" option in question.questionOptions track by $index">
<label>
<input name="options" type="radio" value="$index" ng-click="sinSurCtrl.questionId=question.questionId; sinSurCtrl.answer=$index+1; sinSurCtrl.createAnswer()" onclick="this.disabled = true">
<span> {{option}} {{$index+1}} {{question.questionId}} </span>
</label>
</div>
</form>
</div>
here is the view-
as you can see if i select anyone of those option it is getting disabled but what i am trying to do is if i attempt anyone option then options corresponding to the same question get disabled.
for example-
in Q3. which is a better orator ?
if i choose option (a) then it get selected and after that automatically bot options (a) and (b) get disabled.
Note- please try to keep solution completely in angularjs or if you want use affordable amount of javascript other then that please avoid using external libraries like jQuery(i know nobody in his senses will handle trouble of using jQuery and angular together but for the sake of example i have included its name)
Proposed solution with some suggested refactoring...
First change the ng-click directive to point to a new onOptionButtonClicked function on sinSurCtrl which takes in the two parameters question and index (which it needs to carry out it's work):
<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
<hr>
<p>Q. {{question.questionText}}</p>
<form>
<div ng-repeat="option in question.questionOptions track by $index">
<label>
<input
name="options"
type="radio"
value="$index"
ng-click="onOptionButtonClicked(question, $index)"
ng-disabled="question.disabled">
<span> {{option}} {{$index+1}} {{question.questionId}} </span>
</label>
</div>
</form>
</div>
Also take note of the newly added ng-disabled="question.disabled" directive. This is part of the mechanism that will enable/disable the question's controls.
Now move the variable assignments to the new onOptionButtonClicked function. The controller is generally a better place (than the view) for variable assignments, especially if there are several of them on the same directive.
sinSurCtrl.onOptionButtonClicked = onOptionButtonClicked;
function onOptionButtonClicked(question, index){
sinSurCtrl.questionId=question.questionId;
sinSurCtrl.answer=index;
sinSurCtrl.createAnswer();
question.disabled = true; // <--- This is what disables the option buttons
}
This is where an answered question object gets it's disabled property set to true. This in combination with the ng-disabled directive mentioned previously is what disables the option buttons.
On your controller, create a function that checks if a given questionId has been answered and return truthy if it has. Call that function in ng-disabled in the input tag:
<input type="radio" ng-disabled="sinSurCtrl.questionHasAnswer(question.questionId)" ... />

Save values to an array on checkbox inside ng-repeat in AngularJS

I have a scenario in which I have to put values in array when the checkbox is checked in ng-repeat.
<li ng-repeat="player in team.players">
<div class="row">
<div class="col-md-3 m-t-xs">
<input type="checkbox" ng-model="vm.newEvent.players[$index].selected" ng-change="vm.selectPlayer($index, player)"> {{player.name}}
</div>
<div class="col-md-5 m-t-xs">
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="injured"> Injured
</label>
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="sick"> Sick
</label>
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="other"> Other
</label>
</div>
</div>
</li>
This is how it looks now in browser.
The issue is that when I clicked any of the player name in FC Barcelona Accordion it also selects the same indexed player from FC Bayern Munich Accordion, What I want is to keep all players separate form each-other.
Am i missing something in the binding ??
Use checklist-model, AngularJS directive for list of checkboxes
In Angular one checkbox <input type="checkbox" ng-model="..."> is linked with one model. But in practice we usually want one model to store array of checked values from several checkboxes. Checklist-model solves that task without additional code in controller. You should play with attributes of <input type="checkbox"> tag:
set checklist-model instead of ng-model
set checklist-value - what should be picked as array item
Documentation
This Because of this function: vm.disSelectPlayer($index, player)
I think you have to add index here <li ng-repeat="player in team.players"> in order to give each player different id or index.
Try This :
<li ng-repeat="(key ,player) in team.players">
and use this Key in the function that you call :
vm.disSelectPlayer($index, player , key)
I hope it is useful :)
This is because on on line #4 you wrote
ng-model="vm.newEvent.players[$index].selected".
You have used parents object ie players, instead of this you can use
ng-model="vm.player.selected".
OR
ng-model="vm.team.players[$index].selected".

AngularJs + Reset all attributes on a SingleClick and dnt have form tag

In AngularJs, I am trying to reset all the attributes ( i.e, Dropdown, CheckBox, RadioButton etc) inside a controller. Trying to built global function for all the Controllers.
Snippet :-
<div id="first_div" ng-controller="FirstDivController">
<select id="user_list" ng-options="user in users" ng-model="user_name" >
<option value="">Select</option>
</select>
<input type="checkbox" checklist-value="social_medium" data-target="facebook"
ng-model="checked">
<input type="checkbox" checklist-value="social_medium" data-target="twitter"
ng-model="">
<a href="javascript:void(0);" ng-click="reset_data()">
<span></span> Reset
</a>
</div>
On a single click, I am trying to reset the all the element values as default, and dnt have any form tag. But I am not getting the way to implement it.
Thanks in advance.

Add Delete link / button to delete input field contents?

I am using an input form with multiple input fields.
These input fields can be pre-populated so I want to give the user an easy option of deleting then with a 'delete' link or button beside the field which deletes the full contents of that input field.
Pressing the delete button will also give them a text confirmation that it has been deleted.
I have attached a jpeg of what I am trying to do
I am using wordpress and gravity forms as my form builder. I am thinking maybe there is a jquery solution to do this but not sure how?
My code for one of my input fields is as follows, the inout fields on my form are all the same code but different id's of course so I did not want to paste everything here just 1 as an exmpale.
<li id="field_15_144" class="gfield">
<label class="gfield_label" for="input_15_144">List</label>
<div class="ginput_container">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="" name="input_144">
</div>
// this would be the link to delete the contents of input field "input_15_144
Delete
</li>
Thanks for any help!
Here, I've added custom ids etc. for the fiddle. You can use it the way you like:
Older: jsFiddle - Lewdh
Edit
To meet newer requirements, some more edits were made.
jsFiddle - Lewdh/4/
HTML Code
<li id="field_15_144" class="gfield">
<label class="gfield_label" for="input_15_144">List</label>
<div class="ginput_container" id="inpContain">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_144" />
<button value="delete">Delete</button><br />
</div>
</li>
<li id="field_15_145" class="gfield">
<label class="gfield_label" for="input_15_145">List</label>
<div class="ginput_container" id="inpContain">
<input id="input_15_145" class="medium" type="text" tabindex="40" value="http://jsfiddle.net/" name="input_145" />
<button value="delete">Delete</button><br />
</div>
</li>
jQuery Code
$(document).ready(function() {
$("li div button").on('click', function() {
$(this).prev("input").val('');
$(this).parent().append('<span style="color: green;">Success! Your link has been deleted.</span>');
});
});
HTML
<div class="ginput_container">
<input id="input_15_144" class="medium" type="text" tabindex="40" value="www.google.com" name="input_144">
delete <br/>
<span id="msg" style="color:green;"><span>
</div>
Jquery
$('a#delete').click(function(){
$('input#input_15_144').val('');
$('span#msg').html('deleted successfully');
});​
check the demo
You can do the styling as you want. I have created the simple eg which include the functionality you wanted. If you have any problems let me know.
jQuery's val() does what you need. In the above example you could use a function like this.
$('#input_15_144').val('');
Try this
$(function(){
$(".ginput_container").append('delete'); // append a delete link
$('#delete_link').click(function(){
$('#input_15_144').val(''); // set the textfield empty
$(".ginput_container").append('<br><span>Success - Your link has been deleted</span'); // put a success message
});
});
You may apply css for the formatting
Sorry if i misunderstood your question but to reset input type text field, you only need to set its value to empty string:
$('#id').val('');

creating a jQuery plugin, help selecting a parent

I am creating a plugin for jQuery to create pretty select boxes (I know there are some out there, but this is learning experience for me).
If all goes well I realease the plugin to the public, so I am trying to build it as flexible as possible, and for this reason I am struggling to select the parent form element that houses the select that I am trying to target. Regardless of how a user sets up there HTML, I want to be able to select the parent form element.
Below is my HTML,
<div class="grid_6 alpha quick_search">
<h3>Quick Search Talent</h3>
<form action="http://urbantalent.tv.local/search/quick" method="post" accept-charset="utf-8" class="quick_form"><div style="display:none">
<input type="hidden" name="csrf_urbantalent" value="a8db11249b37322da84d3a211a933b19" />
</div>
<div class="formRow drop_down">
<select name="type">
<option value="0" selected="selected">I'm looking for...</option>
<option value="1">actors</option>
<option value="2">presenters</option>
<option value="3">voice overs</option>
</select>
</div>
<button type="submit" name="submit_search"><img src="http://urbantalent.tv.local/media/images/site/quick_submit.png" /></button>
</form>
</div>
As you can see from this HTML the selects parent is actually, .formRow how can I select the just the parent form, I have tried doing this,
$(this).parent('form') however this doesn't work as we know that form is not actually the parent.
You need this:
$(this).closest("form")
jQuery reference: http://api.jquery.com/closest/

Categories

Resources