Question

我已经通过http成功加载了json数据，但是根据输入的值＆＃39;名称＆＃39;来填充带有这个json数据的表有问题。以下的掠夺者。

JSON

   [
    {
        "name": "Tim",
        "address": "Road",
        "phone": "1234",
        "status": "busy"
    },

    {
        "name": "Sue",
        "address": "Street",
        "phone": "4321",
        "status": "available"
    }
  ]

假设我的控制器和应用程序被正确定义我做错了什么？我想键入Tim或键入Sue并使用相应的数据填充表。

angular.js

 $http.get('data.json').
     success(function(data) {
      $scope.jsonData = data;
        alert("Success");
     }).
     error(function(data) {
        alert("Invalid URL");
   });

   $scope.clickButton = function(enteredValue) {

    $scope.items = $scope.jsonData;

    angular.forEach($scope.items[enteredValue], function (item, key) {
        $scope.results.push({
                 name: enteredValue,
                 address: item.address,
                 phone: item.phone, 
                 status: item.status
             });

 });

JSP

 <table>
        <tr>
            <td><label>Name:</label></td>
  <td>
    <input id="pName" name="pName" type="text" data-ng-model="enteredValue" /> 
            </td>
        </tr>

  <button class="btn btn-primary" data-ng-click='clickButton(enteredValue)'>Search</button>


 <table>
       <tr data-ng-repeat="result in results">
        <td data-title="'ID'">{{result.status}}</td>
        <td data-title="'Name'">{{result.name}}</td>
        <td data-title="'Status'" >{{result.address}}</td>
        <td data-title="'Start Date'" >{{result.phone}}</td>
      </tr>
 </table>

Answer 1

试试这个，问题是在json文件中，enteredValue（在这种情况下是某个人的名字）不是对象中的有效键，因此因为你的$ scope.items [enteredValue]始终是永远不会执行的。未定义：

$http.get('data.json')
.success(function(data) {
    $scope.jsonData = data;
    alert("Success");
})
.error(function(data) {
    alert("Invalid URL");
});

$scope.clickButton = function(enteredValue) {

    $scope.items = $scope.jsonData;

    angular.forEach($scope.items, function (item) {
        if(item.name === enteredValue){
            $scope.results.push({
                name: enteredValue,
                address: item.address,
                phone: item.phone, 
                status: item.status
            });
        }
    });
};

我已经更新了你的plunkr： http://plnkr.co/edit/YRo8SugTDQ54NIvUHDVy

如何使用angular？

1 个答案: