这是我选择的 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 它工作正常。 这个想法是,每次有人在选择中更改餐厅的选项时,它都会用新的菜单数据更新表格。谢谢 ! 有什么建议可以让它发挥作用吗?
最佳答案
您可以像这样使用现有代码来做到这一点:
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;
});
};
});
关于javascript - 将变量从 jQuery 传递到 Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37751792/