Ways to show an input box even when there are no results found

I currently have a database with 5 books, but only 3 of them have prices listed. How can I modify my code to display an input box for all books, regardless of whether they have a price in the database? I am new to coding, so I would appreciate it if you could provide an answer based on my sample code. Thank you! :-)

Out of the 5 books in my database, only books 1, 3, and 5 have prices associated with them. I would like to display an input box for all books (including books 2 and 4) so that users can enter prices for those items as well.

<div ng-repeat="book in books">
  <div>
     <label>{{ book.Name }}</label>
     <div ng-repeat="price in bookPrices | filter : { bookId : book.bookId } ">
        <div>
           <input type="text" class="form-control" name="val" ng-model="price.Value" maxlength="100">
        </div>
     </div>
  </div>
</div>

Answer №1

If there is no value, you can utilize an angular condition to display the input box. Simply replace lines 4 and 5 with the code snippet provided below:

<span>{{price.Value}}</span>
<div ng-if="price.Value == "" || price.Value == undefined">
  <input type="text" class="form-control" name="val" ng-model="price.Value" maxlength="100">
</div>

For those using an angular version older than 1.1.5, the ng-show directive can be used as an alternative.

<span>{{price.Value}}</span>
<div ng-show="price.Value == "" || price.Value == undefined">
  <input type="text" class="form-control" name="val" ng-model="price.Value" maxlength="100">
</div>

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

Using AngularJS to show content based on a callback function

I'm a beginner in angular and it seems like I might be overlooking something. For the registration form, I need users to provide their location. Depending on whether they allow/support navigator.geolocation, I want to display a drop-down menu for cho ...

Implementing JSON object array retrieval from MySQL database and placing it into an empty array using AngularJS

Recently, I've been working on retrieving data from a MySQL database using PHP. Here is the snippet of code that I have written: $result = mysqli_query($con,"SELECT * FROM customers"); $return_arr = array(); while($row = $result->fetch_array(MYSQ ...

The ng-disabled directive in AngularJS fails to disable the button as expected

I'm having an issue with setting an input button to disabled when a user selects a specific value from a select box: Here is my select menu: <select id="jobstatus" name="jobstatus" ng-model="associate.JobStatus" class="form-control"> & ...

What is causing the error message 'Unexpected use of 'location' no-restricted-globals'?

When working on my reactjs code, I encountered the following issue: const { children, location: { pathname }, } = this.props; let path = location.pathname; I am also utilizing the react router module in this component. Anyone have suggestions on how ...

Aligning text to the right in Bootstrap 5 input fields

I'm trying to align the values of my inputs to the right. Any suggestions on how to achieve this? Here's a visual representation of what I'm looking for. This is the snippet from my code: <td style="text-align:center; vertical-alig ...

Encountering this error message while attempting to synchronize an Ionic Angular project in Xcode using npx cap sync

Every time I try to run npx cap sync on my Ionic Angular project in Xcode, I encounter the following error. [!] The plist file at path `/Users/user/Documents/GitHub/project-name/ios/App/App.xcodeproj/project.pbxproj` doesn't exist. I face the ...

The Chrome Extension Javascript popup appears to be empty

Feeling a bit lost on my first attempt at creating a chrome extension. Check out my manifest.json below: { "manifest_version": 2, "name": "Get Offensive Wallpapers", "version": "1.0", "permissions": [ "tabs", "http://*/*", "https://*/*" ], ...

Please include text beneath the input group addon class

Hey everyone, I'm facing some issues with my layout. Whenever the input fields are empty or null, I encounter errors. I want to ensure that the input text and input group addon have equal heights. Also, upon clicking the submit button, I use jquery/aj ...

`Combining Promises and yields for seamless functionality`

I have been struggling to incorporate yield with a created Promise. Despite extensively researching, I am still unable to understand where I am going wrong in my implementation. Based on my understanding, when calling the generator function, I need to use ...

Words next to picture

Can someone help me with aligning different images of varying widths but the same height inline with text next to each image? I tried to do it, but it doesn't look good on responsive screens. Any suggestions on how to fix this? And if there's a b ...

The Analog Clock is unable to access the property of null

I'm struggling to understand what's wrong here. The querySelector doesn't seem to be functioning correctly as I keep encountering the error "cannot read the property of null" on line 10 of my JavaScript code. const deg = 6; const hr = docum ...

Tips for adjusting column positions in a table while maintaining a fixed header and utilizing both horizontal and vertical scrolling

Is there a way to display a table that scrolls both horizontally and vertically, with the header moving horizontally but not vertically while the body moves in both directions? I have been able to shift the position of the columns, however, I am struggling ...

Using VB.NET to run JavaScript through Selenium's ChromeDriver

I've tried various methods in C# but I can't seem to get them working in VB.NET. It's possible that I'm not initializing it correctly. My goal is to run javascript on a loaded URL using the chromedriver. This is what my code looks like ...

Challenges Encountered when Making Multiple API Requests

I've encountered a puzzling issue with an ngrx effect I developed to fetch data from multiple API calls. Strangely, while some calls return data successfully, others are returning null for no apparent reason. Effect: @Effect() loadMoveList$: Obse ...

Issue with Angular dropdown menu not showing the initial option

I am trying to set up a drop-down menu with the first item in the list appearing after it has been sorted by 'name' using the code snippet below: <h2 class="presentation site is-input-header">Site</h2> <div class="modal-select-ele ...

Update the div element without needing to reload the entire page

Is there a way to reload a div tag without refreshing the entire page? I understand this question has been asked before, but I want to make sure I have a clear understanding. <p>click HERE</p> <div class="sample"> <?php functi ...

Explaining the jQuery $.post method

After a thorough search, I finally discovered the importance of adding return false; at the end of my JQuery code for posting data. Without it, my code wasn't functioning as expected. As a beginner in JQuery, I would appreciate some insights into the ...

What are the steps to use grunt for running a node.js application?

Directory Structure: myapp --public(directory) //contains files related to public (AngularJS, CSS, etc) --server(directory) //contains files related to server --server.js Code server.js //located at root directory ---------------------- ... var app = ...

troubles arise when using undeclared functions in javascript

Recently, I've been working on implementing a Javascript CountDown Timer triggered by a button click. The Javascript code is stored in an external file, as well as the CSS for styling the timer. The problem arose when I tried including the Javascript ...