Please see plunker here that demonstrates the issue:
I want to display the corresponding English value (first column) for any given row when any of the values are changed. So for example 'Uploaded' should always be displayed in the pop-up when any of the values on the second row are changed.
I have gotten this far in example, but not quite there:
<textarea ng-model="res.Value"
ng-change="vm.changed(vm.resourceGridResources.Resources[$index].Resources[0].Value)"
style="min-width: 300px"></textarea>
For your exemple.
Do not use $index but $parent.$index.
It will refers to the $index of the previous ng-repeat.
<textarea ng-model="res.Value"
ng-change="vm.changed(vm.resourceGridResources.Resources[$parent.$index].Resources[0].Value)"
style="min-width: 300px">
</textarea>
Corrected plunkr
Related
Having a lot of trouble with ng-repeat in a select tag. The below is not working for some reason though all documentation indicates that it should.
<select id="blahh" ng-model="log_instances" class="selectpicker" multiple>
<option>this works</option> <!-- this works -->
<option ng-repeat="comp in env.status.components">test-value</option>
</select>
The only option that ends up showing is the 'this works' one, but I would expect 'test-value' to show up for each of the items described in the ng-repeat's.
Additionally, I also checked the console for angular.element(document.getElementById('blahh')).scope() and it shows the proper data that I would expect to see. Also, if I include a table right below this select with the same ng-repeat's and fields, it produces the expected output just fine. I'm using Angular 1.6.5
Any help is appreciated!
The HTML snippet included with the original question had <span> tags as immediate children of the <select> tag, which would've produced invalid markup as only <option> or <optgroup> elements are permitted.
Whenever you have a data collection that needs to be presented as a select list, Angular's ng-options attribute makes it easy.
DEMO
Also, if you need a default option (for when the collection data might be in transit due to an AJAX request), include an <option> element assigned with an empty value (i.e. value=""), then you could use ng-if to hide this default option when it is no longer necessary.
Use ng-options like below. But your code also should work check env.status.components
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
My question to you would be, why do you want to use a ng-repeat inside a multiple select, when you have ng-options handy?
Assuming your comp object looks like this:
{
name: 'somevalue'
}
I would change your code to look like so:
<select id="blahh" multiple="true" ng-model="log_instances" ng-options="comp.name for comp in env.status.components"></select>
Please have a look at the plunker demo I have made for you
I'm trying to validate a form that is dynamically generated with JSON data, that is rendered to the page using ng-repeat. The data is questions with corresponding answers. The issue I'm running in to is that with a dynamic ng-model on each group, like so:
<div class="well question-well" ng-repeat="question in Posttest1Questions">
<p><strong>{{question.question}}</strong></p>
<ul>
<li ng-repeat="answers in question.answers">
<input type="radio" name="Q{{question.id}}" ng-model="question_[question.id]" id="{{question.id}}" value="{{answers.id}}" required data-key="{{answers.isCorrect}}">{{answers.answer}}
</li>
</ul>
</div>
Even when all the questions are answered, the form never turns valid. In turn, if I remove the ng-model attr, the form is always valid, even if no radio buttons has been selected.
Example Plunkr: http://plnkr.co/edit/DvcJ8byS0yF7iLp37Ets?p=preview
You can use ng-required to set a condition on the input's required status. In this case, if the model used with ng-model is null, then required. Otherwise, not required.
This way, once you've selected one of the answers (the model has a value), all of the answers for this question will not be marked as required.
<input type="radio" name="Q{{question.id}}" ng-model="question[question.id]" id="{{question.id}}" value="{{answers.id}}" ng-required="question[question.id] == null" data-key="{{answers.isCorrect}}" />
See it working here.
The underscore in
ng-model="question_[question.id]" seems wrong to me.
Please try ng-model="question[question.id]" then you can simply say required
updated your plnkr: http://plnkr.co/edit/gCZHFqd07880Os8FcxhG?p=preview
I am a newbie to Angular js and I just started doing a project in Angular JS.
Let me give you a brief idea about my application. I have a json data which contains data of some nodes, which form a hierarchy. I am using to display this data. So It will take one node at a time and display based on the data in it. I need to display a select field based on the data.
Everything worked fine until I need to display error messages, if the user doesn't select a value in the field. It should be displayed on that particular node. For this I should identify each node( as this is a template). I mapped the id in the data as the name of the select tag, made the tag as required and written a span which displays an error message.
This span will be displayed based on the condition
$error.required
.
The code snippet is as follows.
<form class='css-form form-search' name="myForm" novalidate>
......
<script type="text/ng-template" id="mynodetemplate">
........
<select name="{{node.id}}" ng-model="node.attributeId" ng-options="attribute.id as attribute.name for attribute in attributes" ng-show ="node.showData" required>
<option value="">Select an Attribute</option>
</select>
<span ng-show=”myForm.node.id.$error.required" style="text-align:center; color:red">Please select</span>
'''''''
</script>
..........
<div ui-tree id="tree-root">
<ol ui-tree-nodes ng-model="nodes">
<li ng-repeat="node in nodes” ui-tree-node ng-include="mynodetemplate”></li>
</ol>
</div>
..........
But I am not able to give the correct expression here-
ng-show=”myForm.node.id.$error.required"
I have tried so many ways to evaluate the correct expression, but its not working.
Any help appreciated.
Thanks in advance.
Just as in JavaScript, if you want the name of an object attribute to be node.id, you can't just write
object.node.id
because that references the attribute id of the attribute nodeof the object. So you're forced to use
object['node.id']
So your expression should be
ng-show="myForm['node.id'].$error.required"
But I agree with charlieftl in the comments. You're making your own life difficult by choosing a name containing a dot. Just rename it nodeId, and you can use
ng-show="myForm.nodeId.$error.required"
EDIT:
The name is now in fact a dynamic name. So, in JavaScript you would use
object[node.id]
In the expression, since the scope is implicit, you would use
ng-show="myForm[node.id].$error.required"
I have used the solution posted here
What I have done is that , I will just check whether value exists in the modal or not, or its length.
A sample snippet from the answer is as follows
<input ng-model="somefield">
<span ng-show="!somefield.length">Please enter something!</span>
<span ng-show="somefield.length">Good boy!</span>
Thanks #Supr for the answer.
I dont know why the form validation is not working though :(
I need to display the next field in my form depending on the last value selected in the form. All fields in my form are independent views, specifically are ng-include.
The idea is not to show all fields when the page loads, and instead, show the next field according to the value selected in the previous field.
Example 1:
My first input (my first ng-include) is a text field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).
Example 2:
This time my first input (my first ng-include) is a checkbox field, maybe on trigger onBlur check if the value is correct and then show the next field (my second ng-include), then, if that value is correct and then show the next field (my third ng-include).
Thanks.
Are you familiar with ng-show?
- It shows or hide element depended on value which you declare in ng-show tag.
You can wrap each field (or a group of fields) in ng-form and show the next section depending on the validity of the form of the current section. The fact that elements of the form are delivered via ng-include has little bearing on the approach:
<div ng-form="form1">
<input ng-model="v.one" required min-length="3">
</div>
<div ng-form="form2" ng-show="form1.$valid && !form1.$pending">
<input ng-model="v.two" required min-length="3">
</div>
<div ng-form="form3" ng-show="form2.$valid && !form2.$pending">
<input ng-model="v.three" required>
</div>
This is, of course, at a high-level, and doesn't deal with cases where previous becomes invalid while the next form is showing. For those, more complicated, cases it is better to do the logic in the controller and expose the decision via a function or a scope variable, e.g. showForm2():
<div ng-form="form2" ng-show="showForm2()">
<input ng-model="v.two" required min-length="3">
</div>
I'm using Foundations with AngularJS. I have a case where I'm trying to display things in columns using ng-repeat.
<div class="four columns" ng-repeat="resultsObject in resultsObject">
<div ng-bind-html-unsafe="resultsObject"></div>
</div>
This works fine. But the issue is that the columns size could be anywhere from 1-5. And I'd like the display to update dynamically. So if there are only 2 columns, it would adjust to the correctly column display.
<div class="{{$rootScope.columnCount}} columns" ng-repeat="resultsObject in resultsObject">
<div ng-bind-html-unsafe="resultsObject"></div>
</div>
When I try doing something like the above code, {{$rootScope.columnCount}} doesn't display anything. (I have verified that it does accurately store the correct column based on input.) It shows up in the source as <div class=" columns"> instead of <div class="3 columns">.
Is this an issue with using an angular variable and ng-repeat in the attribute? I've used {{$index}} within the class - so I know it can print things out within the class attribute.
Without seeing some code, I would assume the number of columns is equal to resultsObject.length so can you try:
<div class="{{resultsObject.length}} columns" ...
Here is a short demo.. Check out the class of each li and you'll see the count.
http://plnkr.co/edit/fFRTjD5gse8tnJmDig2I?p=preview
Lastly can you just try to bind to class="{{columnCount}} columns">... I don't think you need to reference the $rootScope.
The problem was an issue with variables overlapping. Apparently I had used columncount in other places in my app. So it just kept getting set back to an null. Simply changing the name solved the problem.