Question

我是棱角分明的新手，我有两个目标：

OnClick，显示来自JSON数组的单个人的姓名，
每次点击都会随机化名称

我被困在我需要将json数据传递给视图的部分：当我点击按钮时，我得到[对象对象]，[对象对象]，[对象对象] 有人可以帮忙吗？

[
    {"name": "John"},
    {"name": "Sue"},
    {"name": "Sally"},
    {"name": "Jim"},
    {"name": "Bev"},
    {"name": "Joe"},
    {"name": "Jess"}
]

脚本

  var peopleApp = angular.module('peopleApp', []);
    idApp.controller('peopleCtrl', ['$scope', '$http', function ($scope, $http){
      $scope.randomPerson = function(){
      $http.get('js/people.json').
       success(function(data) {
       $scope.person = data;
       console.log(data);
  });
 }
}]);

视图

<div class="content">
 <div ng-controller="peopleCtrl">
  <p ng-bind="name"></p>
   <button ng-click="randomPerson()">
    Show random person's name
   </button>
   <p ng-bind="person"></p>
 </div>
</div>

Answer 1

发生这种情况的原因是因为您正在从控制器向视图发送一组对象。

然后直接将数组绑定到<p>标记。所以整个数组都会显示为对象，因为它在视图中未被解析..

尝试更改

<p ng-bind="person"></p>

致：

<p ng-bind="person[randomIndex].name"></p>
 // here random index is a random number 
 // where range of random number generator is from 0 to length of person array

你可以点击这样的函数生成一个随机数。如果你想得到介于0和数组之间的长度，你可以使用：

Math.floor(Math.random() * person.length) + 0

或更具体地说是这样......

    $scope.randomPerson = function(){

      $http.get('js/people.json')
           .success(function(data) {
              $scope.person = data;
              var randomPersonIndex =Math.floor(Math.random() * $scope.person.length) + 0 ;
              $scope.myRandomPerson = $scope.person[randomPersonIndex];
              console.log(data);
  });

然后在HTML上做....

<p ng-bind="myRandomPerson.name"></p>
     // here random index is a random number

Answer 2

您需要在获取数组的随机对象后显示一个简单的值。

这样的事情：

var peopleApp = angular.module('peopleApp', []);
peopleApp.controller('peopleCtrl', ['$scope', '$http',
  function($scope, $http) {
    $scope.data = [{
      "name": "John"
    }, {
      "name": "Sue"
    }, {
      "name": "Sally"
    }, {
      "name": "Jim"
    }, {
      "name": "Bev"
    }, {
      "name": "Joe"
    }, {
      "name": "Jess"
    }];
    $scope.person = "";
    $scope.randomize = function(count) { // This function returns a random number, between 0 to the $scope.data.length.
      return Math.floor((Math.random() * count) + 0);
    };
    $scope.randomPerson = function() { // By using array.filter you can get a specific object.
      $scope.person = $scope.data.filter(function(x) {
        return x.name;
      })[$scope.randomize($scope.data.length)]; // Getting the random object.
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="peopleApp" class="content">
  <div ng-controller="peopleCtrl">
    <p ng-bind="name"></p>
    <button ng-click="randomPerson()">
      Show random person's name
    </button>
    <p data-ng-bind="person.name"></p>
  </div>
</div>

更简单，更好：不使用array.filter。

var peopleApp = angular.module("peopleApp", []);
peopleApp.controller("peopleCtrl", ["$scope", "$http",
  function($scope, $http) {
    $scope.data = [{
      "name": "John"
    }, {
      "name": "Sue"
    }, {
      "name": "Sally"
    }, {
      "name": "Jim"
    }, {
      "name": "Bev"
    }, {
      "name": "Joe"
    }, {
      "name": "Jess"
    }];
    $scope.person = "";
    $scope.randomize = function(count) { // This function returns a random number, between 0 to the $scope.data.length (count).
      return Math.floor((Math.random() * count) + 0);
    };
    $scope.randomPerson = function() {
      $scope.person = $scope.data[$scope.randomize($scope.data.length)]; // Getting the random object.
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="peopleApp" class="content">
  <div ng-controller="peopleCtrl">
    <p ng-bind="name"></p>
    <button ng-click="randomPerson()">
      Show random person's name
    </button>
    <p data-ng-bind="person.name"></p>
  </div>
</div>

Answer 3

简单易用只需添加＆＃34; | JSON ＆＃34;用你的功能名称。例如

<p ng-bind="person | json"></p>

使用ng-bind显示JSON数据显示[object object]

3 个答案: