Question

我需要使用angular.js开发一个简单的应用程序，因为我不习惯使用javascript，所以我遇到了很多麻烦。我的应用程序包含一个输入文本，我写了一个系列/电影标题然后我不得不说基于JSON我得到了JSON中有多少系列，电影和游戏。这是JSON（您可以看到我正在谈论的Type属性）：

{
    "Search": [
        {
            "Title": "The Wire",
            "Year": "2002–2008",
            "imdbID": "tt0306414",
            "Type": "series",
            "Poster": "http://ia.media-imdb.com/images/M/MV5BNjc1NzYwODEyMV5BMl5BanBnXkFtZTcwNTcxMzU1MQ@@._V1_SX300.jpg"
        },
        {
            "Title": "Wire in the Blood",
            "Year": "2002–",
            "imdbID": "tt0337792",
            "Type": "series",
            "Poster": "http://ia.media-imdb.com/images/M/MV5BMTg2NDc3ODI4MF5BMl5BanBnXkFtZTcwOTM3OTIzMQ@@._V1_SX300.jpg"
        },
        {
            "Title": "Thru the Wire",
            "Year": "1987",
            "imdbID": "tt0094143",
            "Type": "movie",
            "Poster": "N/A"
        },
        {
            "Title": "The Wire",
            "Year": "1997–1998",
            "imdbID": "tt0960700",
            "Type": "series",
            "Poster": "N/A"
        },
        {
            "Title": "Over the Wire",
            "Year": "1996",
            "imdbID": "tt0114071",
            "Type": "movie",
            "Poster": "http://ia.media-imdb.com/images/M/MV5BMTY5MjE1NDQ0MF5BMl5BanBnXkFtZTcwODMyNjUxMQ@@._V1_SX300.jpg"
        },
        {
            "Title": "The Wire: The Musical",
            "Year": "2012",
            "imdbID": "tt2191222",
            "Type": "movie",
            "Poster": "N/A"
        },
        {
            "Title": "The Wire: The Chronicles",
            "Year": "2007–",
            "imdbID": "tt1168599",
            "Type": "series",
            "Poster": "N/A"
        },
        {
            "Title": "Hold the Wire",
            "Year": "1936",
            "imdbID": "tt0027756",
            "Type": "movie",
            "Poster": "N/A"
        },
        {
            "Title": "Tapping the Wire",
            "Year": "2007",
            "imdbID": "tt1075404",
            "Type": "movie",
            "Poster": "N/A"
        },
        {
            "Title": "Wind in the Wire",
            "Year": "1993",
            "imdbID": "tt0324568",
            "Type": "movie",
            "Poster": "N/A"
        }
    ]
}

例如，当我输入＆＃34;电线＆＃34;我应该得到4个系列，0场比赛和6部电影。我这样做是通过调用IMDB API然后访问type元素并读取它是电影，游戏还是系列。我到目前为止已编写此代码，但它有一些奇怪的行为：

<html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

    <body>
        <div ng-app="myApp" ng-controller="customersCtrl">TV Series:
            <input type="text" ng-model="seriesName">
            <br>
            <br>Series Name: {{seriesName}}
            <input type="submit" ng-click="search(seriesName)" value="Search" />
            <ul>
                <li ng-repeat="x in names | filter:isActive"></li>
            </ul>
            <br>Series:{{series}}
            <br>
            <br>Game:{{games}}
            <br>
            <br>Movie:{{movies}}
            <br>
        </div>

       <script>

       var app = angular.module('myApp', []);
       app.controller('customersCtrl', function ($scope, $http) {
           $scope.series = 0;
           $scope.movies = 0;
           $scope.games = 0;
           $scope.search = function (value) {

               $http.get("http://www.omdbapi.com/?s=" + value).success(function (response) {
                   $scope.names = response.Search;
               });

               $scope.isActive = function (x) {
                   if (x.Type === "movie") {
                       $scope.movies = $scope.movies + 1;
                   } else if (x.Type === "game") {
                       $scope.games = $scope.games + 1;
                   } else if (x.Type === "series") {
                       $scope.series = $scope.series + 1;
                   }
                   return false;
               };
           };
       });

       </script>

我遇到的第一个问题是，当我点击搜索时，我会得到44个系列，而不是4个和66个电影，而不是6个第二个问题是，第一次点击后，只要我再次输入，我的系列，游戏和电影属性就会改变它们的号码，而不会点击搜索按钮。

Answer 1

你得到44和66因为你是字符串附加而不是添加这些数字。在Javascript中，+运算符还连接字符串，因此'foo'+ 1 ='foo1'。和的两边之一是字符串而不是整数。

此外，如果您只想在单击搜索按钮时搜索一次，我不会将$ scope.isActive函数嵌套在$ scope.search函数中。只需使搜索功能设置$ scope.names变量，如果你想设置电影游戏和系列计数器，也可以在成功后通过迭代响应（我推荐lodash这样的事情）。

一旦所有数据都被范围内的搜索功能正确加载，您就可以操作或渲染它。关于isActive功能，我不完全确定你想要在那里实现什么。但我认为你不需要它。

编辑：

app.controller('customersCtrl', function ($scope, $http) {
$scope.series = 0;
$scope.movies = 0;
$scope.games = 0;
$scope.search = function (value) {
$http.get("http://www.omdbapi.com/?s=" + value).success(function (response) {
    $scope.names = response.Search;
    $scope.movies = _.filter($scope.names,function(entry){
        return entry.Type === 'movie'
    }).length;
    $scope.games = _.filter($scope.names,function(entry){
        return entry.Type === 'game'
    }).length;
    $scope.series = _.filter($scope.names,function(entry){
        return entry.Type === 'series'
    }).length;
});
}

There you have the jsFiddle我该怎么办呢。

Answer 2

似乎还有很多东西要学习角度以及它与DOM的交互方式以及每个角度分量的用途。我建议阅读正确使用过滤器和角度的其他部分，如服务和工厂。

使用JS时学习一些异步编程技巧也不会有什么坏处。使用promises可以使您的应用程序执行得更好，并使您的代码更清晰。

以下html和js片段应该为您清理很多细节：

<div ng-app="myApp" ng-controller="customersCtrl">Query :
<input type="text" ng-model="seriesName">
<input type="submit" ng-click="search(seriesName)" value="Search" />
<br /><br />
<div ng-repeat="entry in data">{{entry}}</div>
<br />
<br/>Series:{{series}}
<br/>
<br/>Game:{{games}}
<br/>
<br/>Movie:{{movies}}
<br/>

var app = angular.module('myApp', []);

app.controller('customersCtrl', function ($scope, $http, $q) {
    $scope.series = 0;
    $scope.movies = 0;
    $scope.games = 0;

    //Use this as a service/factory instead it is not recommended to have this in a controller
    var get = function (search) {
        var deferred = $q.defer();

        $http.get("http://www.omdbapi.com/?s=" + search).success(function (response) {
            deferred.resolve(response)
        });

        return deferred.promise;
    };

    $scope.search = function (value) {
        var promise = get(value);
        promise.then(function (data) {
            $scope.data = data.Search;
            $scope.series = 0;
            $scope.movies = 0;
            $scope.games = 0;

            angular.forEach($scope.data, function(datum){
                switch(datum.Type) {
                    case 'movie' : $scope.movies += 1; break;
                    case 'series' : $scope.series += 1; break;
                    case 'games'  : $scope.games += 1; break;
                    default:break;
                }
            });
        });
    };
});

可以对这段代码进行大量改进，但这应该会让您走上正确的轨道并帮助您查看错误。

我没有编写代码，牢记所有角度最佳实践或其他标准。请仅使用它来查看出错的地方以及可以改进的地方，此代码不适合在任何生产/开发环境中使用。

有几个好的角度源可以教你所有你需要知道的关于如何正确使用所有角度的奇妙和强大的功能。我希望我的快速而肮脏的答案可以帮助你。

从JSON获取数据并使用角度

2 个答案: