使用 AngularJS 处理 Json 数据答案

【问题标题】：Json Data Handling using AngularJS使用 AngularJS 处理 Json 数据
【发布时间】：2015-06-09 18:34:10
【问题描述】：

我有一个新案例，需要帮助。我想要 9 个按钮和一个显示电影详细信息的面板，具体取决于单击了哪一个。所以说如果我点击“变形金刚”，变形金刚的详细信息应该出现在面板中。然后，如果我单击“Fury”，面板详细信息将更改为 Fury 详细信息。我需要将此数据保存在 JSON 文件中。我已经看过，如何做到这一点并且努力理解我将如何去做。这是我到目前为止所得到的。

JS：

var app = angular.module("myApp", []);

app.controller('MainController', ['$scope', function ($scope) {


}])

JSON：

{
  "movie": [
  {
    "id": 1,
    "name": "Star Wars The Phantom Menace",
    "format": "DVD",
    "rate": 4,
    "price": 2
  },
  {
    "id": 2,
    "name": "Star Wars A New Hope",
    "format": "DVD",
    "rate": 6,
    "price": 4
  },
  {
    "id": 3,
    "name": "Transformers",
    "format": "Blu-Ray",
    "rate": 7,
    "price": 3
  },
  {
    "id": 4,
    "name": "Transformers Dark of the Moon",
    "format": "Blu-Ray",
    "rate": 6,
    "price": 5
  }
]}

HTML：

  <body ng-controller="MainController" ng-app="myApp">
    <h1 style="text-align:center">Garrett's Rentals</h1>

    <div ng-repeat="movie in movies">
      <button>{{movie.name}}</button>
    </div>

    <div class="panel">
      <h3>You have selected:</h3>
      <p>{{movie.name}}</p>
      <p>{{movie.format}}</p>
      <p>{{movie.rate}}</p>
      <p>{{movie.price}}</p>
    </div>
  </body>

【问题讨论】：

标签： javascript arrays json angularjs angularjs-ng-repeat

【解决方案1】：

使用

var app = angular.module("myApp", []);

app.controller('MainController', ['$scope', function ($scope) {
    var json={
  "movie": [
  {
    "id": 1,
    "name": "Star Wars The Phantom Menace",
    "format": "DVD",
    "rate": 4,
    "price": 2
  },
  {
    "id": 2,
    "name": "Star Wars A New Hope",
    "format": "DVD",
    "rate": 6,
    "price": 4
  },
  {
    "id": 3,
    "name": "Transformers",
    "format": "Blu-Ray",
    "rate": 7,
    "price": 3
  },
  {
    "id": 4,
    "name": "Transformers Dark of the Moon",
    "format": "Blu-Ray",
    "rate": 6,
    "price": 5
  }
  ]};
console.log(json);
$scope.movies=json.movie;
    console.log($scope.movie);
}]);

HTML

    <body ng-controller="MainController" ng-app="myApp">
    <h1 style="text-align:center">Garrett's Rentals</h1>

    <div ng-repeat="movie in movies">
      <button>{{movie.name}}</button>
    </div>

    <div class="panel">
      <h3>You have selected:</h3>
      <p>{{movie.name}}</p>
      <p>{{movie.format}}</p>
      <p>{{movie.rate}}</p>
      <p>{{movie.price}}</p>
    </div>
  </body>

寻求支持：http://jsfiddle.net/sXkjc/993/

【讨论】：

这不起作用，刚刚返回 {{movies.movie.name}}
请重新检查我已编辑的答案并为解决方案提供了一个新的小提琴
谢谢，ng-repeat 可以解决这个问题，但是点击按钮时它不显示电影数据？
我很高兴！如果我要让 JSON 成为一个单独的文件，我该怎么做？
您可以使用 JSON.parse() 它是一个将转换为对象的 javascript 方法

【解决方案2】：

在按钮上使用ng-click 指令来设置当前选定的电影，如以下。

var app = angular.module("myApp", []);

app.controller('MainController', ['$scope', function ($scope) {
   $scope.movies= movies; //here movies is your json object
   $scope.selectedMovie=$scope.movies[0]; // assume that first movie is selected default
}])

HTML

<div ng-repeat="movie in movies">
  <button ng-click="selectedMovie=movie">{{movie.name}}</button>
</div>

<div class="panel">
  <h3>You have selected:</h3>
  <p>{{selectedMovie.name}}</p>
  <p>{{selectedMovie.format}}</p>
  <p>{{selectedMovie.rate}}</p>
  <p>{{selectedMovie.price}}</p>
</div>

【讨论】：

【解决方案3】：

JS

angular.module('myApp', [])

.controller('MainController',['$scope','$http',function($scope,$http){


  $scope.contents=null;
  $http.get('URL TO JSON').then(function(resp){
    console.log('Success', resp);
    $scope.contents=resp.data;


  },
  function(err){
    console.error('ERR',err);
  })

}]);

HTML

 <body ng-controller="MainController" ng-app="myApp">
<h1 style="text-align:center">Garrett's Rentals</h1>

<div ng-repeat="movie in movies">
  <button>{{movie.name}}</button>
</div>

<div class="panel">
  <h3>You have selected:</h3>
  <p>{{movie.name}}</p>
  <p>{{movie.format}}</p>
  <p>{{movie.rate}}</p>
  <p>{{movie.price}}</p>
</div>

【讨论】：

我如何调用 html 中的数据？
您可以在按钮标签中使用 ng-click=function({{movie.name}})。您可以在控制器中定义一个函数，然后选择相应的电影

【解决方案4】：

控制器代码：

var app = angular.module("myApp", []);

    app.controller('MainController', ['$scope', function ($scope) {

        $scope.movies = {

            movie: [
            {
                id: 1,
                name: "Star Wars The Phantom Menace",
                format: "DVD",
                rate: 4,
                price: 2
            },
            {
                id: 2,
                name: "Star Wars A New Hope",
                format: "DVD",
                rate: 6,
                price: 4
            },
            {
                id: 3,
                name: "Transformers",
                format: "Blu-Ray",
                rate: 7,
                price: 3
            },
            {
                id: 4,
                name: "Transformers Dark of the Moon",
                format: "Blu-Ray",
                rate: 6,
                price: 5
            }
            ]}

            $scope.setMovie = function(movie) {
            $scope.currentMovie = movie;
        }

    }])

HTML：

<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="app.js"></script>
  </head>


     <body ng-controller="MainController" >
    <h1 style="text-align:center">Garrett's Rentals</h1>

    <div ng-repeat="movie in movies.movie">
      <button ng-click = "setMovie(movie)">{{movie.name}}</button>
    </div>

    <div class="panel">
      <h3>You have selected:</h3>
      <p>{{currentMovie.name}}</p>
      <p>{{currentMovie.format}}</p>
      <p>{{currentMovie.rate}}</p>
      <p>{{currentMovie.price}}</p>
    </div>
  </body>

</html>

http://plnkr.co/edit/0f5bbaS38GCIjGtCfLmy?p=preview

【讨论】：

【解决方案5】：

我已经给出了您要求的工作示例，请参阅http://plnkr.co/edit/uQLqB3CfSUlETQEcpsS5?p=preview

把html改成

<div ng-repeat="movie in movies">
      <button ng-click="selectedMovie(movie)">{{movie.name}}</button>
    </div>

    <div class="panel">
      <h3>You have selected:</h3>
      <p>{{movie.name}}</p>
      <p>{{movie.format}}</p>
      <p>{{movie.rate}}</p>
      <p>{{movie.price}}</p>
    </div>

javascript 到

myApp.controller('MainController', ['$scope', function($scope) {
    var data = {
  "movie": [
  {
    "id": 1,
    "name": "Star Wars The Phantom Menace",
    "format": "DVD",
    "rate": 4,
    "price": 2
  },
  {
    "id": 2,
    "name": "Star Wars A New Hope",
    "format": "DVD",
    "rate": 6,
    "price": 4
  },
  {
    "id": 3,
    "name": "Transformers",
    "format": "Blu-Ray",
    "rate": 7,
    "price": 3
  },
  {
    "id": 4,
    "name": "Transformers Dark of the Moon",
    "format": "Blu-Ray",
    "rate": 6,
    "price": 5
  }
]};
$scope.movies = data.movie;
$scope.selectedMovie = function(movie){
  $scope.movie = movie;
}
}]);

【讨论】：

【解决方案6】：

您需要做的就是在您的控制器中定义movies 对象，以便在您的前端显示电影。将电影 JSON 直接嵌入到控制器中会如下所示：

app.controller('MainController', ['$scope', function ($scope) {
 $scope.movies1 = 
  [{
    "id": 1,
    "name": "Star Wars The Phantom Menace",
    "format": "DVD",
    "rate": 4,
    "price": 2
  },
  {
    "id": 2,
    "name": "Star Wars A New Hope",
    "format": "DVD",
    "rate": 6,
    "price": 4
  },
  {
    "id": 3,
    "name": "Transformers",
    "format": "Blu-Ray",
    "rate": 7,
    "price": 3
  },
  {
    "id": 4,
    "name": "Transformers Dark of the Moon",
    "format": "Blu-Ray",
    "rate": 6,
    "price": 5
  }];
}]);

请注意，我已从电影对象中删除了 movie 属性，并将 movies 转换为数组，以便 ng-repeat 可以正常工作。

如果您需要将电影 JSON 作为单独的文件，您可以使用 @KuZon 指出的 $http 服务加载该文件。

$http.get('movies.json').then(function(json) {
    $scope.movies1 = json.data.movie;
  });

在这种情况下，我将电影属性留在 JSON 对象中，并使用它来选择要存储在 $scope.movies1 中的数组。

你可以看到这两种方法in this Plunkr

最后，不要忘记在您的按钮上使用ng-click 来实际选择电影。类似于以下内容：

<button ng-click="selectMovie1(movie)">{{movie.name}}</button>

在你的控制器中：

$scope.selectMovie1 = function(movie) {
   $scope.movie1 = movie
 }

【讨论】：

感谢您的帮助，但 ng-repeats 不适用于 Plunkr 上的这两个示例？
@TheGarrett 在我看来，Plunkr 目前遇到了一些问题，因为我现在什至无法打开 plunker。希望它会很快得到解决，但与此同时，我在答案中添加了一些额外的代码示例。也许这些会有用。
@TheGarrett 现在好像又上线了，你可以再试一次。