[英]Pass Variable from jQuery to Angular
Here's my select HTML 这是我选择的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>
I have the following jQuery code to get me the id from any giving option in a select. 我有以下jQuery代码来获取select中任何给定选项的id。
$("#SelectMenu").change(function() {
var id = $(this).find("option:selected").val();
console.log(id); });
And then this Angular Code to fill out a table with ng-repeat. 然后这个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;
});
});
Here's the table that is populated with the Angular Code: 这是使用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>
The problem is that i can't seem to pass the id attribute that i get from jQuery to the $http.get, however if i declare id inside the angular code it works fine. 问题是我似乎无法将从jQuery获取的id属性传递给$ http.get,但是如果我在角度代码中声明id它可以正常工作。 The idea is that every time someone changes the option for the restaurant in the select it updates the table with the new menu data.
这个想法是,每当有人在选择中更改餐厅的选项时,它会使用新的菜单数据更新表格。 Thanks !
谢谢 ! Any Suggestions to make it work?
有什么建议让它起作用吗?
You can do that with your existing code like this: 您可以使用现有代码执行此操作,如下所示:
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;
});
});
});
However, it is not the goal of angular to use jQuery for getting a DOM element's value. 但是,使用jQuery获取DOM元素值不是angular的目标。 You should think about using
ng-model
in <select/>
. 您应该考虑在
<select/>
使用ng-model
。 This will return you the value of the selected <option/>
into the $scope variable. 这会将所选
<option/>
的值返回到$ scope变量中。 See this example: 看这个例子:
HTML 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 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;
});
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.