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

Question

我的项目演示链接: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 find') 但旧值仍在 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>       

Answer 1

除非确实找到了电影，否则 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包括修复。