Question

我已经在本机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>

Answer 1

您的实现存在一些问题：

您已经在使用submit指令的div之外使用了ng-controller之类的AngularJS控制器方法。因此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>

Answer 2

在这里，工作代码（您只需要添加Submit函数，即可从ng-model中提取input： 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>

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

AngularJS应用-JSON的用户输入和输出

2 个答案: