I'm havings some problems with ng-show and $pristine.
Here is the code (also on CodePen):
<blockquote ng-show="!comment.author.$pristine && !comment.rating.$pristine && !comment.comment.$pristine">
<p>{{comment.rating}} Stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}}
</blockqoute>
When every field on the form has been filled, I want to show the div that contains my duplicate, but I want it to be hidden while some are still empty.
I tried to to use
!comment.[index].$pristine && ....
so when every field has been filled, the blockquote would become visible, but it didn't work.
Hey the way you are going the main problem will be that when the user will be filling any random data in the last text box, the moment he fills a letter the div will be visible to him - despite whatever improvements you make to the code.
What I'll suggest is - make use of ng-show="whatever" for that section that you want to show after the data has been filled.
In the beginning where your controller starts make it false $scope.whatever = false; and now it wont be visible to the user; when the user has filled all the text boxes call a trigger and check if the data is valid or not and then $scope.whatever=true; - Now your section will be visible.
To call the trigger you can do various things
- you can make use of ng-change on the last textbox and there check values of all textboxes using their specific model name, I hope you know that.
Let me know if you want further clarification on this.
I believe you can specify ng-hide as a className to hide it by default.
<blockquote ng-show="whatever" class="ng-hide"
Change this
<blockquote ng-show="!comment.author.$pristine && !comment.rating.$pristine && !comment.comment.$pristine">
<p>{{comment.rating}} Stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}}
</blockqoute>
To this
<blockquote ng-show="!commentForm.author.$pristine && !commentForm.comment.$pristine">
<p>{{comment.rating}} Stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}}, {{comment.date | date}}</footer>
</blockqoute>
Notice I'm using the form to check for the form properties, not the scope properties. Just change comment to commentForm (which is your form's name).
More info about form controllers
Working codepen
I would bind values of the form input to some variables in the controller, and on their ng-change="controller.validate()" run a validate code, so you can check if fields are not empty and input is correct and after that set isBlockquoteVisible variable, that would be in <blockquote ng-show="{{controller.isBlockquoteVisible}}" ...
<blockquote ng-hide="comment.author.$pristine && comment.rating.$pristine && comment.comment.$pristine">
<p ng-show="!comment.rating.$pristine">{{comment.rating}} Stars</p>
<p ng-show="!comment.comment.$pristine">{{comment.comment}}</p>
<footer ng-show="!comment.author.$pristine">{{comment.author}}</footer>
</blockquote>
Related
I have a form where I want the user to be able to enter data into the text field, but then I want this to be entered into the span tags live as they are typing each character.
I have managed to do this successfully with one input field going to one span tag using most of the javascript in this post. But changing it slightly to try and accomodate multiple input fields to multiple span tags.
But I can't seem to get this to work when I have multiple text fields that I want to live update to multiple span tags. For example:
I want this input to live update to the below span tag:
<input type="text" class="inst_name">
<span class="nametag"></span>
and I want this input to live update this span tag:
<input type="text" class="keypair_name">
<span class="keyname"></span>
But when I do, it works with the first one (the inst_name to nametag) but when I try it with the second one (keypair_name to keyname) it keeps showing up in my html as undefined where the text should be live updating to but the code doesn't actually produce any errors.
Below is the JavaScript code I have tried:
var inputKeyName = document.querySelector(".keypair_name"),
outputKeyName = document.querySelector(".keyname"),
inputInstName = document.querySelector(".inst_name"),
outputInstName = document.querySelector(".nametag");
function keydownHandler() {
outputKeyName.innerHTML = inputKeyName.value;
}
function keydownHandlerInstName() {
outputInstName.innerHTML = inputInstName.value;
}
inputKeyName.addEventListener("input", keydownHandler);
inputInstName.addEventListener("input", keydownHandlerInstName);
Any ideas on how I can get this to work would be much appreciated. Thanks
So I have found out the problem. A rookie mistake of using the same name twice in my html. I had used the same name for a class name of "inst_name" for my input field as well as a div elsewhere in my code that I didn't realise were named exactly the same. Thanks for commenting and confirming this was working.
I have been working all day to try and get the selected values on one set of checkboxes on my Django form and copy the selected ones only to an identical checkbox on my form. If a user clicks on a checkbox in form.author defined below, I want the same identical checkbox to automatically be checked on form.favorite_author defined below.
I've tried a JQuery approach as documented here...Copy Selected Checkbox Value From One Checkbox To Another Immediately Using JQUERY but no luck so far. I've recently begun exploring an avenue with the Modelmultiplechoicefield and the checkboxselectmultiple parameters within the form itself. From what I can tell, when I am using JQuery and trying to check a box on the form, the value is coming back as undefined which is most likely why it is not propagating the checkbox selection to the other checkbox.
Here is my form....
class ManagerUpdateNewAssociateForm(forms.ModelForm):
class Meta:
model = Library
self.fields['author'] = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(),
queryset=Books.objects.all()
self.fields['favorite_author'] = forms.ModelMultipleChoiceField(
widget=forms.CheckboxSelectMultiple(),
queryset=Books.objects.all()
My HTML...
<div class="spacer83">
{{ form.author }}
</div>
<div class="spacer83">
{{ form.favorite_author }}
</div>
When I tried to trace JQuery, it told me the checkbox selections are undefined. I did read a bit about how Modelmultiplechoicefield, since it uses a queryset it doesn't show the selections, but I can't figure out how to get it to.
Thanks in advance for any thoughts.
In combination with the other issue included in this one, I went back to the JQuery route and explored further. From what I can tell, I was not able to use the class for the input because of the way the HTML for Django forms is generated in this use case. I ultimately was able to leverage the input name and then used the code below to interrogate the checkboxes accordingly:
$(document).ready(function() {
$("[name=author]").change(function() {
let selectedValA = $(this).val();
let isAChecked = $(this).prop("checked");
$(`[name=favorite_author][value="${selectedValA}"]`).prop("checked", isAChecked);
});
});
});
So I have a bunch of p elements that call the redo function on click.
As you can see, I load the quest[q] template onto the .form div when it gets clicked. Each of these templates that can be loaded were previously submitted forms that sent the value to an object.
When the P element gets clicked, the idea is to rerender the form that gives the user the ability to modify the value in the object.
Right now I am just hard coding examples as you can see by setting the value of income id (which is the id of the input on template that I am rendering onto the .form div).
However this isnt working, so when the template is rerender, the value in the input blank.
Can anyone help me figure out so as to how I can get the value of the input to show the previously submitted value?
function redo(q,elem){
q=Number(q);
console.log(q);
if(q+1 != iterator){
$('.form').load(quest[q]);
iterator=q+1;
}
var income = document.getElementById('income');
income.value=1; (this will be objectname.property);
}
Here you go with an example solution https://jsfiddle.net/1nxv2qhr/1/
$('p').click(function(){
$("#income").text("This is a test message");
$('#div1').html("This is a test message");
$('#textbox1').val("This is a test message");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click Me!!!</p>
<p id="income"></p>
<div id="div1"></div>
<input type="text" id="textbox1" />
For, setting the value to an element like (paragraph, div), please use .html or .text and for input textbox use .val
Hope this will help you to achieve solution.
`http://plnkr.co/edit/jj7LvmZ73MKUAdecQzpP`
Please provide me a solution to apply CSS to one selected field alone and not to whole row in ng-repeat.
I am doing a form validation with mandatory input fields in ng-repeat grid.
I want to check the value of input on blur and display error red border if it is empty. But all fields are highlighted when single field is empty. So I want to highlight fields separately.
The border is disappearing when I click other text box. I want the border to stay till it is filled and not empty. Please guide me. You help is greatly appreciable.
Took the source code from http://code.ciphertrick.com/2014/12/06/highlight-a-selected-row-in-ng-repeat-using-ng-class/ to demonstrate my problem.
Just capture the current context (using 'this') and set the local variable value ('selectedRow') and just use this local variable to set the class in ng-class
<input type="text" ng-class="{'selected':selectedRow}" ng-blur="setClickedRow($index,this)" name="userName" ng-model="user.name[$index]" ng-required="true"/>
$scope.setClickedRow = function(index,context){
var val= $scope.user.name[index];
if(angular.isUndefined(val) || val === null){
context.selectedRow = true; }
else{
context.selectedRow = false; }
}
Plunker
Ps:- I attached selectedRow with context not with scope of controller :-)
Background: As part of a project I'm working on, Users (referred to as "artists" in the case below) can optionally select one or more from a series of Roles: Manager, Producer, Agent, and so forth. Consequently, I need to show or hide certain parts of page depending on which Role(s) the User has selected.
The example: I've tried using the following to conditionally show a div when the User has selected "Manager" as one of his/her Roles (and have it hidden when "Manager" isn't selected), but with no luck. What should I be using in the ng-show directive instead?
<div class="manager_section" ng-show="data.artist.roles.name == 'Manager'">Sample Text Here</div>
Please note: the div appears just fine with no ng-show/ng-hide directive applied, so I'm not looking for a CSS answer or anything; I'm simply looking for the conditional aspect provided by ng-show/ng-hide. And I know the data for the Roles is being pulled to the page, because when I ran the following on the page to test it, the names of each of the Roles the User had selected were accurately displayed:
<div ng-repeat="role in data.artist.roles">{{ role.name }}</div>
You can use controller method if you need to run arbitrary JavaScript code.
For example:
<div class="manager_section" ng-show="isAuthorized('Manager')">Sample Text Here</div>
angular.module('myApp', [])
.controller('AppCtrl',function(){
$scope.isAuthorized = function(role){
for(var i=0;i<$scope.data.artist.roles.length;i++){
if($scope.data.artist.roles[i].name === role) return true;
}
return false;
}
};