eagle eagle - 4 months ago 9
HTML Question

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

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

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.