Javascript 如何在使用AngularJS单击按钮时更新html页面中的值

我的项目演示作为链接：

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

搜索电影
电影名称：
搜寻

标题：{{name}}
发布日期：{Release}
长度：{{Length}}
描述：{{Description}}
IMDb评级：{{Rating}








搜索电影的结果

标题：{{result（）.name}
发布日期：{result（）.Release}
长度：{{result（）.Length}
描述：{{result（）.Description}
IMDb评级：{{result（）.Rating}

返回搜索页面

您需要添加此

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

在else街区

添加整个代码：

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

var-app=angular.module（'myApp'，[]）；
app.controller（'searchMovieController'，函数（$scope，$http，resultFactory）{
$scope.searchMovieF=函数（）{
如果（$scope.searchMovie.length>0）{
$scope.api=http://www.omdbapi.com/?t=“+$scope.searchMovie+”&y=&plot=short&r=json”；
$http.get（$scope.api）
.成功（功能（数据）{
$（“#电影名称”）.autocomplete({
资料来源：数据标题
});
if（（data.Error！=“找不到电影！”）&&（data.Error！=“必须提供多个字符。”）{
变量详细信息={
名称：data.Title，
发布：数据发布，
长度：data.Runtime，
描述：数据。绘图，
评级：data.imdbRating
}
resultFactory.set（详细信息）
}
否则{
警报（“未找到电影！”）
变量详细信息={
姓名：“，
发布：“，
长度：“，
说明：“，
评级：“”
}
resultFactory.set（详细信息）
}
});
}否则{
提醒（“请写点东西！”）
}
}
});
app.controller（'resultMovieController'，function（$scope，resultFactory）{
$scope.result=函数（）{
返回resultFactory.details
}
});
app.factory（'resultFactory'，function（）{
变量详细信息={
}
变量集=功能（obj）{
var objKeys=Object.keys（obj）；
for（var i=0；i

除非实际找到胶片，否则resultFactory似乎没有设置新值。即使电影与用户的搜索条目不匹配，也必须确保已设置resultFactory

您只需将resultFactory.set移到

if

语句之外，并将每个键设置为空字符串（如果该键未在

数据中定义）。通过在resultFactory.set中使用两个管道（
| |
），可以对每个键快速执行此操作

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

包括修复