How to update values in html page when clicked button with AngularJS

Question

My project demo as link: http://jsfiddle.net/Lvc0u55v/6741/

I use AngularJS.

If a movie is not found, old values should not appear in the following code

<form style="margin-bottom: 40px;">
    <ul>
        <li><h2>Title: {{result().name}}</h2></li>
        <li><h3>Release Date: {{result().release}}</h3></li>
        <li><h3>Length: {{result().length}}</h3></li>
        <li><h3>Description: {{result().description}}</h3></li>
        <li><h3>IMDb Rating: {{result().rating}}</h3></li>
    </ul>
</form>

When I write something in text value and click the button, if the movie is not found, the result page is not updated, so the old values are still showing.

For example I wrote 'x-men' in text and clicked button, I can see about X-men movie.

Then I wrote 'asdfg' and clicked the button, I can see alert('Movie not found') but old value is still writing in html page.

I tried ng-if, ng-show , $state.reload() etc. but I could not get it to work.

Code as snippet:

var app = angular.module('myApp', []);


    app.controller('searchMovieController', function ($scope, $http, resultFactory) {
        $scope.searchMovieF = function () {
            if ($scope.searchMovie.length > 0) {
                $scope.api = 'http://www.omdbapi.com/?t=' + $scope.searchMovie + '&y=&plot=short&r=json';
                $http.get($scope.api)
               .success(function (data) {
                   $("#movie-name").autocomplete({
                       source: data.Title
                   });
                   if ((data.Error != "Movie not found!") && ( data.Error != "Must provide more than one character.")) {
                       var details = {
                           name:data.Title,
                           release: data.Released,
                           length: data.Runtime,
                           description: data.Plot,
                           rating: data.imdbRating
                       }
                       resultFactory.set(details)

                   }
                   else {
                       alert("Movie not found !")
                   }
               });
            } else {
                alert("Please write somethings !")
            }
        }
    });
    app.controller('resultMovieController', function ($scope,resultFactory) {
        $scope.result = function() {
            return resultFactory.details
        }
    });


    app.factory('resultFactory', function() {
        var details = {

        }
        var set = function(obj) {
            var objKeys = Object.keys(obj);
            for(var i=0; i < objKeys.length; i++) {
                details[objKeys[i]] = obj[objKeys[i]];
            }
        }
        return {
            details: details,
            set: set
        }
    })

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div class="bs-component" ng-controller="searchMovieController">
        <form class="well form-search">
            <fieldset>
                <legend>Search Movie</legend>
            </fieldset>
            <div>
                <label class="control-label" for="movie-name">Movie Name : </label>
                <input type="text" id="movie-name" class="input-small" style="margin-left: 10px;" placeholder="Please write movie name" ng-model="searchMovie">

                <a class="btn-sm btn-primary" style="margin-left: 10px;" ng-click="searchMovieF()">
                    <span class="glyphicon glyphicon-search"> Search</span>
                </a>
            </div>
        </form>
        <ul>
            <li> <h2>Title: {{name}}</h2></li>
            <li><h3>Release Date: {{release}}</h3></li>
            <li><h3>Length: {{length}}</h3></li>
            <li><h3>Description: {{description}}</h3></li>
            <li><h3>IMDb Rating: {{rating}}</h3></li>
        </ul>
    </div>            
    
    
    <br><br><br><br><br><br>

<div id="forResult" class="bs-component" ng-controller="resultMovieController">
        <form class="well form-search" id="formResult">
            <fieldset>
                <legend>Result for Search Movie</legend>
            </fieldset>
        </form>
        <ul>
            <li> <h2>Title: {{result().name}}</h2></li>
            <li><h3>Release Date: {{result().release}}</h3></li>
            <li><h3>Length: {{result().length}}</h3></li>
            <li><h3>Description:{{result().description}}</h3></li>
            <li><h3>IMDb Rating: {{result().rating}}</h3></li>
        </ul>
        <a ui-sref="/search-movie" class="btn-sm btn-primary" style="margin-left:20px;">
            <span class="glyphicon glyphicon-circle-arrow-left">Back to Search Page</span>
        </a>
    </div>       

Answer 1

It would appear that the resultFactory is not being set with new values unless a film is actually found. You'll have to make sure that your resultFactory is being set even when a film does not match the user's search entry.

You can simply move your resultFactory.set outside of the if statement and set each key to an empty string if the key is not defined in data. This can be done quickly per key by using two pipes (||) in resultFactory.set

resultFactory.set({
  name:data.Title || '',
  release: data.Released || '',
  length: data.Runtime || '',
  description: data.Plot || '',
  rating: data.imdbRating || ''
});

Here's a link to the updated JSFiddle including the fix.

Answer 2

You need to add this

var details = {
                           name:"",
                           release: "",
                           length: "",
                           description: "",
                           rating: ""
                       }
                       resultFactory.set(details)

in the else block

add the entire code:

var app = angular.module('myApp', []);


    app.controller('searchMovieController', function ($scope, $http, resultFactory) {
        $scope.searchMovieF = function () {
            if ($scope.searchMovie.length > 0) {
                $scope.api = 'http://www.omdbapi.com/?t=' + $scope.searchMovie + '&y=&plot=short&r=json';
                $http.get($scope.api)
               .success(function (data) {
                   $("#movie-name").autocomplete({
                       source: data.Title
                   });
                   if ((data.Error != "Movie not found!") && ( data.Error != "Must provide more than one character.")) {
                       var details = {
                           name:data.Title,
                           release: data.Released,
                           length: data.Runtime,
                           description: data.Plot,
                           rating: data.imdbRating
                       }
                       resultFactory.set(details)

                   }
                   else {
                       alert("Movie not found !")
                       var details = {
                           name:"",
                           release: "",
                           length: "",
                           description: "",
                           rating: ""
                       }
                       resultFactory.set(details)
                   }
               });
            } else {
                alert("Please write somethings !")
            }
        }
    });
    app.controller('resultMovieController', function ($scope,resultFactory) {
        $scope.result = function() {
            return resultFactory.details
        }
    });


    app.factory('resultFactory', function() {
        var details = {

        }
        var set = function(obj) {
            var objKeys = Object.keys(obj);
            for(var i=0; i < objKeys.length; i++) {
                details[objKeys[i]] = obj[objKeys[i]];
            }
        }
        return {
            details: details,
            set: set
        }
    })