将变量从 jQuery 传递到 Angular

Question

这是我选择的 HTML

<label for="SelectMenu">Select the Menu</label><br>
<select id="SelectMenu" name="SelectMenu" ng-init="">
  <?php foreach ($list as $lista): ?>
  <option value="<?php echo $lista->MENU_ID; ?>"><?php echo $lista->MENU_NAME; ?></option>
  <?php endforeach;  ?>
</select>

我有以下 jQuery 代码可以从选择中的任何给定选项中获取 id。

$("#SelectMenu").change(function() {
var id = $(this).find("option:selected").val();
console.log(id); });

然后这个 Angular 代码用 ng-repeat 填写表格。

var app = angular.module('myApp', []);
app.controller('dishesCtrl', function($scope, $http) {
// var id = 1;
$http.get('http://192.168.1.162/dw/rest/menu_info/' + id)
    .then(function(response) {
        $scope.info = response.data;
    });
});

这是使用 Angular 代码填充的表格：

<table class="table table-striped table-hover" ng-controller="dishesCtrl">
    <th> Dish </th>
    <th> Type</th>
    <th> Price (€)</th>
    <tr ng-repeat="x in info">
        <td> {{x.DISH_NAME}} </td>
        <td> {{x.DISH_TYPE}} </td>
        <td> {{x.PRICE_VALUE}} </td>
    </tr>
</table>

问题是我似乎无法将我从 jQuery 获得的 id 属性传递给 $http.get，但是如果我在 angular 代码中声明 id，它就可以正常工作。 这个想法是，每次有人在选择中更改餐厅的选项时，它都会使用新的菜单数据更新表格。谢谢 ！ 有什么建议可以让它发挥作用吗？

Answer 1

您可以像这样使用现有代码做到这一点：

var app = angular.module('myApp', []);
app.controller('dishesCtrl', function($scope, $http) {
    $("#SelectMenu").change(function() {
        var id = $(this).find("option:selected").val();
        $http.get('http://192.168.1.162/dw/rest/menu_info/' + id)
          .then(function(response) {
              $scope.info = response.data;
        });
    });
});

然而，使用 jQuery 获取 DOM 元素的值并不是 Angular 的目标。您应该考虑在<select/> 中使用ng-model。这会将所选<option/> 的值返回到 $scope 变量中。看这个例子：

HTML

<select id="SelectMenu" name="SelectMenu" ng-init="" ng-model="SelectMenu.id" ng-change="updateSelectMenu()">
    <?php foreach ($list as $lista): ?>
      <option value="<?php echo $lista->MENU_ID; ?>"><?php echo $lista->MENU_NAME; ?></option>
    <?php endforeach; ?>
</select>

JavaScript

app.controller('dishesCtrl', function($scope, $http) {
    $scope.SelectMenu = {};

    $scope.updateSelectMenu = function() {
        $http.get('http://192.168.1.162/dw/rest/menu_info/' + $scope.SelectMenu.id)
          .then(function(response) {
              $scope.info = response.data;
        });
    };
});