如何在 JSON 数组中推送元素

Question

这是我请求在服务器上发布数据的控制器。虽然我可以发布标题和评级，但我无法发布任何类型，因为 Genres 是一个数组。如何推送 Genres Array 中的数据？

app.controller('addTrack', function ($scope, $http) {
        $scope.tracks = [];
        var genre = []; 
        var pushing =  genre.push($scope.add_genre);
        $scope.add_track = "";
        $http.get('http://104.197.128.152:8000/v1/tracks?page=48')
            .then(function (response) {
                $scope.tracks = response.data.results;
            });
        $scope.add = function (event) {
            if (event.keyCode == 13) {
                $http.post('http://104.197.128.152:8000/v1/tracks', {
                    title: $scope.add_title,
                    rating: $scope.add_rating,
                })
                    .then(function (data) {
                        $scope.genres = data;
                        //console.log($scope.add_genre);
                        $scope.add_title = '';
                        $scope.add_rating = '';
                        $scope.add_genre = '';
                    });
                $http.get('http://104.197.128.152:8000/v1/tracks?page=48')
                    .then(function (response) {
                        $scope.genres = response.data.results;
                    });
            }
        } });

Http POST 到http://104.197.128.152:8000/v1/tracks 接受回复

{
    "title": "animals",
    "rating": 4.5,
    "genres": [
        1
    ]
}

也为您提供我的 HTML。

<!DOCTYPE html>
<html ng-app="musicApp">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="app.js"></script>
</head>

<body>
    <div class="container" ng-controller="addTrack">
        <div>
            <h1>Add New Track</h1>
        </div>
        <div class="form-group">
            <label>Title:</label>
            <input type="text" class="form-control" ng-model="add_title" placeholder="Type to add new Title">
        </div>
        <div class="form-group">
            <label>Genre:</label>
            <input type="text" class="form-control" ng-model="add_genre" placeholder="Type to add new Genre">
        </div>
        <div class="form-group">
            <label>Rating:</label>
            <input type="text" class="form-control" ng-model="add_rating" placeholder="Type to add new Rating" ng-keyup="add($event)">
        </div>

        <div class="clearfix">
            <button class="btn btn-primary col-xs-12 bottom-button" value="click" id="button">Add a New Track</button>
        </div>
        <div class="clearfix">
            <label>Available Tracks</label>
            <ul class="list-group" ng-repeat="track in tracks">
                <li class="list-group-item clearfix"><span class="pull-left title">{{track.title}}</span> <span class="genre">[{{track.genres[0].name}}]</span> <span class="pull-right rating">{{track.rating}}</span></li>
            </ul>
        </div>
    </div>
</body>

</html>

Answer 1

如果您想要实现的是添加带有title、rating 和genre 的轨道对象，则需要更改整个逻辑，以便控制器将所有输入绑定到相同的对象属性。

首先，您需要在控制器中定义一个track 对象，并将输入绑定到其 HTML 中的属性：

JavaScript：

app.controller('addTrack', function($scope, $http) {
  $scope.tracks = [];
  $scope.track = {
    title: '',
    rating: 0,
    genre: ''
  };
  $http.get('http://104.197.128.152:8000/v1/tracks?page=48')
    .then(function(response) {
      $scope.tracks = response.data.results;
    });
  $scope.add = function(event) {
    if (event.keyCode == 13) {
      $http.post('http://104.197.128.152:8000/v1/tracks', $scope.track)
        .then(function(data) {
          $scope.track = {};
        });
    }
  }
});

HTML：

<!DOCTYPE html>
<html ng-app="musicApp">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div class="container" ng-controller="addTrack">
    <div>
      <h1>Add New Track</h1>
    </div>
    <div class="form-group">
      <label>Title:</label>
      <input type="text" class="form-control" ng-model="track.title" placeholder="Type to add new Title">
    </div>
    <div class="form-group">
      <label>Genre:</label>
      <input type="text" class="form-control" ng-model="track.genre" placeholder="Type to add new Genre">
    </div>
    <div class="form-group">
      <label>Rating:</label>
      <input type="text" class="form-control" ng-model="track.rating" placeholder="Type to add new Rating" ng-keyup="add($event)">
    </div>

    <div class="clearfix">
      <button class="btn btn-primary col-xs-12 bottom-button" value="click" id="button">Add a New Track</button>
    </div>
  </div>
</body>

</html>

注意：

• 注意ng-model="track.title"、ng-model="track.rating"的使用 和 HTML 中的 ng-model="track.genre" 将这些输入绑定到我们的 trackobject 属性。

• 此代码假定 genre 在此处是一个字符串，如果您将使用 您需要修改代码以使其适合此选项的对象列表。