If I have multiple ng-repeat and checkbox in last of them, all checkboxes are checked if I push one of them. How to resolve the problem?
Example:
<div ng-repeat="(ctIndex, ct) in cts">
<div ng-repeat="cs in ct track by $index">
<!-- One checkbox: using ng-checked in place of ng-model -->
<div ng-repeat="(tId, task) in cs">
<input type="checkbox" id="taskChecked{{ctIndex}}_{{$index}}_{{tId}}" data-ng-change="checkTask(ctIndex, $index, tId)" name="task{{ctIndex}}_{{$index}}_{{tId}}" data-ng-model="task.selected">
</div>
</div>
</div>
Edit: Solved with #ManojLodhi's answer, but now I have another problem. The model doesn't change (true or false) to "task.selected"
All your checkboxes connect to the same property in your model:
data-ng-model="task.selected"
You need independent model properties for independent checkboxes.
Related
I am trying to make comments functionality using Angular js. The problem is that when i want to write a comment for a post, the text is also writing inside other input elements (comments). I write a text inside one input, but it writes it in all inputs
So for example same is happening with this code
<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
<input type="text" ng-model="$parent.new">
</div>
</div>
if i use new instead of $parent.new i get undefined, but when i use $parent.new and i write in one input, it also writes in other inputs.
The issue is that you are assigning all of the inputs to the same model, so your inputs are all in sync with the same object.
What you need is to assign each input to a different model. I'm guessing you need these models to be dynamic, so you should use an array as your model and track your ng-repeat by $index like so:
<div ng-repeat="comments in articles track by $index">
<div>
<input type="text" ng-model="arr[$index]">
<span ng-if="arr[$index]">
{{arr[$index]}}
</span>
</div>
</div>
Now, in your controller, you can initialize the empty arr like so:
$scope.arr = [];
Now, your inputs will be in sync with $scope.arr depending on the index they were in.
Try out this jsfiddle for an example.
This is because you've giving same model (ng-model="$parent.new") for all of the inputs What you should do to avoid this problem is assign different model to each input element. Something like
<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
<input type="text" ng-model="comments">
</div>
</div>
Change ng-model of input to
<input type="text" ng-model="comments.comment">
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)" ... />
I have a problem. In angular app I have three levels of ng-repeat and two checkboxes like:
<div ng-repeat="(ctIndex, ct) in cts">
<div ng-repeat="job in ct track by $index">
<input type="checkbox" id="job{{ctIndex}}_{{$index}}" data-ng-change="checkJob(ctIndex, $index)" name="job{{ctIndex}}_{{$index}}" data-ng-model="job.selected">
<div ng-repeat="(tId, task) in cs">
<input type="checkbox" id="taskChecked{{ctIndex}}_{{$index}}_{{tId}}" data-ng-change="checkTask(ctIndex, $index, tId)" name="task{{ctIndex}}_{{$index}}_{{tId}}" data-ng-model="task.selected">
</div>
</div>
</div>
When job.selected and task.selected are in checked status also are checked checkboxes and model of its counterparts in another ng-repeats.
If I use ng-checked without ng-model, selected vars doesn't change.
Can you help me? Thanks
I am trying to use ng-checked for checkbox under ng-repeat.
<div class="listing" ng-repeat="item in list>
<input type="checkbox" class="favor" ng-checked='::isFavorite(item)' ng-click='setFavorite(item)'/>
</div>
There is one method, which I am calling on ng-checked event. But, if there are 50 checkboxes in the list (i.e. 50 items in ng-repeat), then each time the page is drawn, the same method gets called twice an item. Any help would be really appreciable.!!
It would be good if you declare JSON object in the controller for each item.
JS
list=[{name:'Item1',checked:true},{name:'Item2',checked:false}];
HTML
<div class="listing" ng-repeat="item in list>
<input type="checkbox" class="favor" ng-checked='item.checked' ng-click='setFavorite(item)'/> {{item.name}}
</div>
so far I've only seen people used ng-model to bind the state of checkbox. How can I know which checkbox is checked with angularjs? for example I want to get the index of the checked checkedbox so that I can do something on the backend.
If it were in jquery / js I can use function to catch the state of the checkbox and send the index or etc info to be send back to database.
my plunker : http://plnkr.co/edit/dG9cwswiVzLdjEnpSNvu?p=preview
You could use ng-click, like this:
http://plnkr.co/edit/kOTtbSHbw1kaGWmjqQbf?p=preview
I am not clear about your problem but if you want label which associate with checkbox then you should use ng-init.
<div ng-controller="main">
<div class="checkbox" ng-repeat="item in items">
<input type="checkbox" id="{{$index}}" ng-model="item.done"><label for="{{$index}}" class="done-{{item.done}}" ng-init="item.text='Label for' + item.val">Label for {{item.val}}</label>
</div>
{{items}}
</div>
See Demo