Json Обработка данных с использованием AngularJS

У меня новый случай, где мне нужна помощь. Я хочу иметь 9 кнопок и панель, которая отображает детали фильма, в зависимости от того, какой из них был нажат. Скажем, если бы я нажал «Трансформаторы», детали трансформаторов должны появиться на панели. Затем, если бы я нажал «Fury», детали панели изменились бы на детали Fury. Мне нужны эти данные в файле JSON. Я посмотрел, как это сделать, и я пытаюсь понять, как я буду заниматься этим. Вот что у меня есть до сих пор.Json Обработка данных с использованием AngularJS

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>

источник

2015-06-09 TheGarrett

использование

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>

Fiddle для поддержки: http://jsfiddle.net/sXkjc/993/

источник

2015-06-09 10:05:26

Это не работает, только что вернулся {{фильмов. movie.name}} – TheGarrett

Пожалуйста, повторите проверку. Я отредактировал hav и предоставил новую скрипку для решения. –

Спасибо, ng-repeat работает над этим, но он не отображает данные фильмов, когда th e нажата кнопка? – TheGarrett

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>

источник

2015-06-09 10:08:37 KuZon

Как я мог бы затем вызвать данные в html? – TheGarrett

вы можете использовать ** ng-click = function ({{movie.name}}) ** в теге кнопки. Вы можете определить функцию в вашем контроллере, которая выбирает сопроводительный фильм, затем – KuZon

Все, что вам нужно сделать, это определить объект 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 в качестве отдельного файла, вы можете загрузить этот файл, используя службу $http, как отметил @KuZon.

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

источник

2015-06-09 10:13:36 Christina

Спасибо за помощь, но ng-repeatts не работайте над этими двумя примерами на Plunkr? – TheGarrett

@ TheGarrett Мне кажется, что у Plunkr в настоящее время есть некоторые проблемы, потому что я даже не могу открыть плункер прямо сейчас. Надеюсь, что это будет разрешено в ближайшее время, но в то же время я добавил несколько дополнительных примеров кода в свой ответ. Возможно, это будет полезно. – Christina

@ TheGarrett Кажется, он вернулся в онлайн сейчас, чтобы повторить попытку. – Christina

Используйте ng-click директиву на кнопку, чтобы установить выбранный фильм, как follwing.

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>

источник

2015-06-09 10:18:32

Controller Код:

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

источник

2015-06-09 10:20:41

Я дал рабочий пример ваших требований см 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; 
} 
}]);

источник

2015-06-09 10:22:39 vamsikrishnamannem

Json Обработка данных с использованием AngularJS

ответ

Смежные вопросы