Display a div element with Angular's ng-show directive

I am encountering difficulties with implementing ng-show and $pristine.

Below is the code snippet (also available 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>

My intention is to display the div containing duplicate information only when all form fields are filled, hiding it otherwise.

I attempted to achieve this using 

!comment.[index].$pristine && ....

However, my approach did not yield the desired result where the blockquote becomes visible once all fields have been completed.

javascriptangularjsng-showangularjs-ng-show

Answer №1

It's crucial to address the issue where users input random data into the final text box, triggering visibility of the div as soon as a letter is typed. No matter how you refine the code, this problem persists.

My suggestion is to implement ng-show="whatever" for the specific section that should only appear after the data has been filled.

Initially set $scope.whatever = false; in your controller to keep it hidden from the user. Then, upon completion of all text boxes, use a trigger to validate the data and set $scope.whatever=true;, making the section visible to the user.

To activate the trigger, there are various options available: - Utilize ng-change on the last textbox to examine values of all textboxes based on their respective model names.

If you need further clarification on this process, feel free to reach out.

Answer №2

It is possible to set ng-hide as a className in order to hide it from the start.

<blockquote ng-show="whatever" class="ng-hide"

Answer №3

Revise 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 the following 

<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>

Please note that I am utilizing the form to verify the form properties instead of the scope properties. Simply update comment to commentForm (this is your form's name).

Answer №4

To ensure data integrity, I suggest linking form input values to controller variables. By implementing an 

ng-change="controller.validate()"
function, you can validate the input for completeness and accuracy. Following successful validation, set the isBlockquoteVisible variable within a 
<blockquote ng-show="{{controller.isBlockquoteVisible}}" ...
element.

Answer №5

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS Switchable Style Feature

I am in need of some assistance with the navigation on my website. You can find the current code at this link: http://jsfiddle.net/Sharon_J/cf2bm0vs/ Currently, when you click on the 'Plus' sign, the submenus under that category are displayed bu ...

javascriptjqueryhtmlcss

Running only failed tests in Protractor can be achieved by implementing a custom script that

I've encountered a problem in my JavaScript file where some of the test cases fail intermittently, and I want to rerun only those that have failed. Is there any feature or solution available that can help with this issue? It's quite frustrating a ...

javascriptseleniumprotractor

Unable to run JavaScript file fetched from cache API

For a web application built using pure vanilla JavaScript without utilizing service workers, I am looking to cache a JavaScript file hosted on an AWS S3 file server explicitly. The script below will be embedded in the index.html file of the application (UR ...

javascripthtmlcachingprogressive-web-apps

What is the process for taking a website project running on localhost and converting it into an Android web application using HTML, CSS, and JavaScript

Looking for recommendations on how to create an Android web application using HTML, CSS, and JavaScript. Any suggestions? ...

javascriptandroidhtmlcssweb-applications

The Ajax request returned a status of 200, yet an error message was displayed

Even though the status is 200, why does it print the error message inside alert("error...");? function makeSelect() { var blouseoption = document.querySelector('input[name="blouseoption"]:checked').value; var url = "http://dukano.co/sakh ...

javascriptjqueryajax

The Bootstrap modal fails to appear when closed

After opening and closing the modal window, clicking on the button does not display the modal window again. The screen remains grayed out and the content of the modal window does not appear. yyyyyyyyyyyyyyyy function customShortcode() { ob_start(); ...

javascriptbootstrap-4bootstrap-modal

What is the best method to send a HTTP request (specifically for scraping) to an Angular2 website?

I am attempting to utilize a node server to extract data from an angular2 application. However, the issue I am encountering is that the response I receive is just the index.js file, which essentially represents the "loading..." section of the webpage. My ...

javascriptnode.jsangularhttprequest-promise

How do I determine the appropriate image type to use?

I'm a beginner in the world of Node.js and I'm currently working on an application that stores image files. However, I am unsure about what type of data the images should be. const userSchema = new mongoose.Schema({ userImage: { type ...

javascriptnode.js

Is it possible to host multiple React applications on a single port? Currently experiencing issues with running both an Admin panel and the Front side in production mode on the same Node.js API server

Is it possible to host multiple React applications on the same port? I am experiencing issues with running both an Admin panel and a Front side React app in production mode on the same Node.js API server. ...

javascriptnode.jsreactjsmongodbreact-redux

Executing tasks in a job on GitHub using Node.JS and .NET

I am currently in the process of developing a JavaScript API for a .NET project. In order to streamline my workflow, I would like to know if it is feasible to have GitHub actions set up with both Node.JS and various versions of .NET Core (2.1, 2.2, 3.0 or ...

javascriptc#.netgithub-actions

Challenge with Basic Authentication: AngularJS Client unable to attach headers to Java Jersey Backend

I have a Java Backend using Jersey and an Angular Client on a different Host that accesses the API provided by Jersey. Everything works great without authentication, as I have included a CORS filter. However, when I add basic auth to the web.xml on the J ...

securityangularjsresttomcat

What is the most efficient way to calculate the total sum of all product amounts without using Jquery?

I am working with a dynamic table where data is inserted and the total of each product is calculated by multiplying the price by the quantity. What I need now is to get the sum of all the totals for each product. You can see how the table looks here: htt ...

javascripthtml

Developing a Generic API Invocation Function

I'm currently working on a function that has the capability to call multiple APIs while providing strong typing for each parameter: api - which represents the name of the API, route - the specific route within the 'api', and params - a JSON ...

javascripttypescriptgenerics

What could be the issue causing Vue to not start up properly?

I have been working on a Rails application and have integrated some Vue components into the pages. The components range from simple dynamic lists to more complex implementations with nested components. Let me walk you through how it all functions with som ...

javascriptvue.jsvuejs2

My objective is to upload a video file and store it on the server using multer

My goal is to effectively receive and save a video file in the uploads folder with the proper extensions using node, express, and multer. Despite successfully passing the video to the server, it doesn't save as intended. Below is my backend code snipp ...

javascriptnode.jsexpressmulter

Preserving Foreign Key Relationships in Django Rest Framework Serializers

Within my project, I have two interconnected models named Task and Batch, linked through a Foreign Key field. My goal is to verify the existence of a Batch Object in the database before creating a new Task Object. The Batch object represents the current da ...

javascriptdjangodjango-rest-framework

What is the best approach for managing Create/Edit pages in Next.js - should I fetch the product data in ServerSideProps or directly in the component?

Currently, I am working on a form that allows users to create a product. This form is equipped with react-hook-form to efficiently manage all the inputs. I am considering reusing this form for the Edit page since it shares the same fields, but the data wil ...

javascripttypescriptnext.jsserver-side-renderingreact-hook-form

Scrolling Container Following Down the Page, Halts at Its Own Bottom (Similar to Twitter)

I am facing an issue and need some help. I am working on creating a three-column page layout where the middle section is for posts, the right section is for links and references (a bit long), and the left section is fixed. My question is: How can I preven ...

javascripthtmlcss

Node js server for world's warm greetings

I have been attempting to utilize Node.js for hosting a web server on a dedicated PC, but unfortunately I am unable to access it from anywhere outside of my local network. After researching online, the general consensus is that all I need to do is enter t ...

javascriptnode.jshttpserver

When new text is added to Div, the first line is not displayed

One of the divs on my page has an ID of "TrancriptBox" and contains multiple lines of text. When I scroll through it on my iPad, everything works fine. However, if I scroll and then change the text within that div, it doesn't display the first line o ...

javascriptjqueryhtmltext