Angularjs 应用程序 - 来自 JSON 的用户输入和输出答案

【问题标题】：Angularjs app - user input and output from JSONAngularjs 应用程序 - 来自 JSON 的用户输入和输出
【发布时间】：2018-11-15 15:36:48
【问题描述】：

我已经在原生 Javascript 中完成了这项工作，但我现在想在 Angular 中完成。

我想创建一个简单的应用程序，用户在其中输入城市名称，并获取该城市餐厅的输出以及餐厅名称和地址。我能够成功地输出带有预定义城市的数据，但我似乎无法通过用户输入来完成。我不确定如何将“city_name”的值放入控制器中的 url。

这是我目前所拥有的。我希望 div 内的表格内容仅在单击提交按钮时出现。

<!doctype html>
<html>
    <head>
        <title>Restaurant App</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    </head>

    <body ng-app="restaurantApp">
        <input type="text" ng-model="city_name"</input>
        <button ng-click="submit()">Submit</button>
        <div ng-controller="restaurantController">
            <table>
                <tr ng-repeat="restaurant in restaurantList">
                    <td>{{restaurant.name}}</td>
                    <td>{{restaurant.address}}</td>
                    <td>{{restaurant.price}}</td>
                </tr>
            </table>
        </div>
        <script>
            //var city = 'chicago';

            angular.module('restaurantApp', [])
            .controller('restaurantController', function($scope, $http) {
                $http.get(`http://opentable.herokuapp.com/api/restaurants?city=${$scope.city_name}`).
                then(function(response) {
                    $scope.restaurantList = response.data.restaurants;
                });
            });
        </script>
    </body>
</html>

【问题讨论】：

标签： angularjs json

【解决方案1】：

您的实施存在一些问题：

你已经在 div 之外使用了像 submit 这样的 AngularJS 控制器方法，你使用了 ng-controller 指令。所以 AngularJS 对此一无所知。
其次，您没有在控制器中定义submit 方法。

解决这两个问题应该可以正常工作..

在这里，试试这个（通过点击运行代码片段按钮）：

<!doctype html>
<html>

<head>
  <title>Restaurant App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>

<body ng-app="restaurantApp" ng-controller="restaurantController">
  <input type="text" ng-model="city_name">
  <button ng-click="submit()">Submit</button>
  <div>
    <table>
      <tr ng-repeat="restaurant in restaurantList">
        <td>{{restaurant.name}}</td>
        <td>{{restaurant.address}}</td>
        <td>{{restaurant.price}}</td>
      </tr>
    </table>
  </div>
  <script>
    //var city = 'chicago';

    angular.module('restaurantApp', [])
      .controller('restaurantController', function($scope, $http) {
        $scope.submit = function() {
          $http.get(`http://opentable.herokuapp.com/api/restaurants?city=${$scope.city_name}`).
          then(function(response) {
            $scope.restaurantList = response.data.restaurants;
          });
        }

      });
  </script>
</body>

</html>

【讨论】：

【解决方案2】：

这里，工作代码（你只需要添加提交函数，它从input获取ng-model： JS：

$scope.submit = function(city){
          console.log(city);
       $http({
        method: 'GET',
        url: 'http://opentable.herokuapp.com/api/restaurants?city=' + city,
        })
        .then(function successCallback(data) {
        $scope.restaurantList = response.data.restaurants;
        }, function errorCallback(response) {
                    console.log(response);
                    console.log('error');
       });
      }

HTML：

 <input type="text" ng-model="city_name"/>
        <button ng-click="submit(city_name)">Submit</button>
        <div>
            <table>
                <tr ng-repeat="restaurant in restaurantList">
                    <td>{{restaurant.name}}</td>
                    <td>{{restaurant.address}}</td>
                    <td>{{restaurant.price}}</td>
                </tr>
            </table>
        </div>

plunker：http://plnkr.co/edit/qgsnR8mDxi9QcwlUk9Mp?p=preview

【讨论】：