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代码来从select中的任何给定选项中获取id。

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

然后使用此Angular Code填写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 Code填充的表：

<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，但是如果我在角度代码中声明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的目标。您应该考虑在ng-model中使用<select/>。这会将所选<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;
        });
    };
});

将变量从jQuery传递给Angular

1 个答案: