#html #angularjs #asp.net-mvc #angularjs-ng-repeat
#HTML #angularjs #asp.net-mvc #angularjs-ng-repeat
Вопрос:
Я довольно новичок в angularjs.So , пожалуйста, пожалуйста, игнорируйте, если есть какие-либо ошибки.Здесь у меня есть один выпадающий список в ng-repeat, если я выберу значения в выпадающем списке, соответствующий код элемента и выбранное описание из выпадающего списка должны перейти в angularcontroller, и мне нужно отправить его в контроллер mvc
angular.module('myApp', [])
.controller('ctrl', ['$scope', '$http', '$rootScope',function ($scope, $http,$rootScope) {
$scope.values = [{
Code: 1,
Description: 'Apple'
}, {
Code: 2,
Description: 'Orange'
}, {
Code: 3,
Description: 'Mango'
}, {
COde: 4,
Description: 'Guva'
}
];
$scope.ddlrhs = '';
$scope.data = [{
Code: 1,
Description: 'Red'
}, {
Code: 2,
Description: 'Orange'
}, {
Code: 3,
Description: 'Yellow'
}, {
Code: 4,
Description: 'Green'
}
];
$scope.submit = function ()
{
$scope.list = [];
for (var i = 0; i < $scope.values.length; i ) {
var j = "";
$scope.list.push({
VALUE: $scope.values[i].Code,
Description: $scope.myForm.items[i].Description
})
}
$http({
method: "POST",
url: "/Controller/Save",
data:
$scope.list
})
}
}]) <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div id="dvcollection" ng-App="myApp" ng-controller="ctrl" >
<form name="myForm" >
<table id="tblcollections">
<thead>
<tr >
<th>ItemCode</th>
<th>ItemDesc</th>
<th>DropdownDesc</th>
<th>DropdownCode</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in values">
<td><span>{{item.Code}}</span> </td>
<td>{{item.Description}}</td>
<td>
<select ng-model="myForm.items[$index]" ng-options=" element.Description for element in data ">
<option value="">Select </option>
</select>
</td>
<td><span>{{myForm.items[$index].Code}}</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="button" value="save" ng-click="submit()"style="float:right;" >
</td>
</tr>
</tbody>
</table>
</form>
</div> Комментарии:
1. Я думаю, вам следует сначала объявить $scope.items = []; затем замените все myForm.items на items
2. вы пытаетесь сопоставить переменные как один к одному
3. Нет, я не пытаюсь сопоставить одно к одному, для выбранного значения из выпадающего списка мне нужен соответствующий код элемента, который должен быть передан в angular controller
Ответ №1:
Эй, может быть, это может быть вашим ожиданием
<div ng-app="myApp" >
<div id="dvcollection" ng-controller="ctrl">
<form name="myForm">
<table id="tblcollections">
<thead>
<tr>
<th>ItemCode</th>
<th>ItemDesc</th>
<th>DropdownDesc</th>
<th>DropdownCode</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in values">
<td><span>{{item.Code}}</span> </td>
<td>{{item.Description}}</td>
<td>
<select ng-model="itemssample" ng-options=" element.Description for element in data " ng-change="pushingelement(item.Code,itemssample.Code)">
<option value="">Select </option>
</select>
</td>
<td><span>{{myForm.items[$index].Code}}</span></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="button" value="save" ng-click="submit()" style="float:right;">
</td>
</tr>
</tbody>
</table>
</form>
<div> This is written to ensure that mapping is stored or not. (Not necessary)
<p ng-repeat="item in list">
Mapping of {{$index}} element {{item.ItemCode}} -> {{item.ColorCode}}
</p>
</div>
</div>
</div>
Убедитесь, что ваш контроллер MVC должен иметь модель как
public class MapperClass
{
public int ItemCode { get; set; }
public int ColorCode { get; set; }
}
СКРИПТ
angular.module('myApp', [])
.controller('ctrl', ['$scope', '$http', '$rootScope', function ($scope, $http, $rootScope) {
$scope.list = [];
$scope.values = [
{ Code: 1, Description: 'Apple' },
{ Code: 2, Description: 'Orange' },
{ Code: 3, Description: 'Mango' },
{ Code: 4, Description: 'Guva' }
];
$scope.ddlrhs = '';
$scope.data = [
{ Code: 1, Description: 'Red' },
{ Code: 2, Description: 'Orange' },
{ Code: 3, Description: 'Yellow' },
{ Code: 4, Description: 'Green' }
];
$scope.pushingelement = function (itemCode, colorCode) {
var temp = { "ItemCode": itemCode, "ColorCode": colorCode };
$scope.list.push(temp);
console.log($scope.list);
}
$scope.submit = function () {
$http({
method: "POST",
url: "/Controller/Save",
data:
object:$scope.list
})
}
}
]);
Ответ №2:
ПОПРОБУЙТЕ ОДИН РАЗ, я НАДЕЮСЬ, ЭТО ПОМОЖЕТ ВАМ
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>get selected value from dropdownlist in angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.sample = [{
id: '1',
name: 'Red'
}, {
id: '2',
name: 'Green'
}, {
id: '3',
name: 'Orange'
}, {
id: '4',
name: 'Yellow'
}];
});
</script>
</head>
<body data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<form id="form1">
Select Name:
<select data-ng-model="ddlvalue">
<option value="">--Select--</option>
<option data-ng-repeat="t in sample" value="">{{t.name}}</option>
</select>
</form>
</body>
</html>