Changing a modal windows title through angularjs

Question

I'm practicing angularjs by creating a simple inventory app. I have a button to add a new product to the list of products, and I have an edit button for the existing products.

Both buttons bring up the same modal windows, and I have it set so that the title of the modal says "New Product" when I click on "Add New Product" button, and "Edit Product" when I click to edit an existing product.

The issue I'm having is when I click to add a new product the title displays correctly; however, as soon as I start typing the new code for the new product, the title changes automatically to "Edit Product".

Below is the code I'm using for this, and the entire code can be found here http://codepen.io/andresq820/pen/LWGKXW

The modal windows is not coming up in codepen.io; however, I'm writing logging "edit" to the console when the edit button is clicked, and "new" when the new product is clicked.

HTML CODE

<div class="modal fade" id="editItemModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">{{title(item.code)}}</h4>
            </div>

            <div class="modal-body">
                <form name="myEditForm" ng-submit="editProduct(item)">
                    <div class="form-group">
                        <label for="code">Code:</label>
                        <input type="text" size="5" maxlength="5" class="form-control" name="code" id="code"
                               ng-model="item.code" ng-disabled="false">
                    </div>

                    <div class="form-group">
                        <label for="description">Description:</label>
                        <input type="text" class="form-control" id="description" ng-model="item.description" required>
                        <span ng-show="myEditForm.description.$touched && myEditForm.description.$invalid">The description is required.</span>
                    </div>

                    <div class="form-group">
                        <label for="amount">Amount:</label>
                        <input type="number" min="0" max="99999" size="5" maxlength="5" class="form-control" name="amount" id="amount"
                               ng-model="item.amount" integer>
                    </div>



                    <div class="form-group">
                        <label for="radio">Type:</label>
                        <div class="radio">
                            <label><input type="radio" name="optradio" ng-model="item.type" value="in">In</label>
                            <label><input type="radio" name="optradio" ng-model="item.type" value="out">Out</label>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <input type="button" class="btn btn-default" data-dismiss="modal" ng-click="close()" value="Close" />
                        <input type="submit" class="btn btn-primary pull-right" value="Submit" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

ANGULARJS CODE

 $scope.title = function(code){
    console.log(code);

    if (typeof code == 'undefined'){
        console.log('new');
        return 'New Product';
    }
        console.log('edit');
        return 'Edit Product';                 
};

Answer 1

The input box for Code is bound to item.code value. As soon as you start typing anything in there, item.code is no longer undefined . And as per your condition in the method call for function, it returns Edit title when code is not undefined .

Answer 2

Change your function with below code. It will check if the code is already exist in your $scope.items or not. It will return as new if item not exited.

 $scope.title = function(code){
  var title = 'New Product';
  angular.forEach($scope.items, function(value, key) {
      var arr = Object.values(value);
      if(arr.indexOf(code) !== -1 ) {
         title = 'Edit Product';
      }
   });
   console.log(title);
   return title;   
 };

Answer 3

In your view you get your title through the title() function and what that function returns is based on the current code. As soon as you change anything in your model, Angular will detect a change and will go through ALL your two-way bindings and see if they need to be changed.

So in your case the following happens:

1. You enter a code
2. Angular detects a change
3. Angular will check all your bindings to see if they changed (ngBinding or the more common {{}} )
4. The title() function gets called to see if it has changed, the title function has changed indeed, there is now a code so it will return the new title.

So how do you fix it? Easy!

instead of a two-way binding ( {{}} ) you can use a one-time binding ( {{::}} ). A one-time binding gets set once and then Angular 'forgets' about it, it simply won't care about any changes that happens to it any more.

In your case:

{{title(item.code)}}

to

{{::title(item.code)}}