即使没有匹配的记录，如何显示输入框

Question

There are 5 books in my database. Only 3 of them have a price. How can I still show an input box if there's no price in the database? Code below only creates an input box if there is a matching Id in books and bookPrices table. Im a beginner, if possible please use my sample code when answering. :-)

I have 5 books. Only books 1, 3 & 5 has a price. There will be no input box on Items 2 & 4. I want all of them to have an input box so that the user can enter a price and save it.

<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

You can use an angular condition to show the input box if there is no value. Replace lines 4 and 5 with the below code.

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

Alternatively, if you're using an angular version older than 1.1.5 you can use ng-show .

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