我的项目演示作为链接：http://jsfiddle.net/Lvc0u55v/6741/
我使用AngularJS。
如果找不到电影，则旧值不应出现在以下代码中
<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>
当我在文本值中写入内容并单击按钮时，如果未找到电影，则结果页面不会更新，因此仍显示旧值。
例如，我在文字中写了“ X战警”，然后单击按钮，就可以看到有关“ X战警”的电影。
然后我写了“ asdfg”并单击了按钮，我可以看到
alert('Movie not found')，但旧值仍在html页中书写。我尝试了
ng-if，ng-show，$state.reload()等，但是无法正常工作。程式码片段：
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> 最佳答案
除非实际找到影片，否则似乎没有为resultFactory设置新值。即使电影与用户的搜索条目不匹配，也必须确保设置了resultFactory。
您可以简单地将resultFactory.set移动到if语句之外，如果未在data中定义键，则将每个键设置为空字符串。通过在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包括修复程序。