У меня есть раскрывающийся список, содержащий идентификаторы брендов. в соответствии с идентификатором, получая соответствующие продукты и отображая его в таблице. В каждой строке есть две кнопки, которые перемещают продукты вверх и вниз, в основном, переставляя ряды. теперь я могу выполнять все функции взаимозаменяемости и привязки ребра. Строка выбирается при нажатии. моя единственная проблема: я не могу выбрать строку после ее перемещения вверх или вниз.
<div ng-app="myapp" ng-controller="prodctrl">
<select id="BrandDropdown" class="InstanceList" ng-change="GetBrandProd()" ng-model="Products">
<option>Select Brand</option> //Sample Data
<option value=1>Brand 1<option>
<option value=2>Brand 2<option>
</select>
<table id="prodtab" ng-model="Products">
<tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" class="{{selected}}">
<td>{{P.Id}}</td>
<td>{{P.Rank}}</td>
<td>{{P.Name}}</td>
<td>
<input type="button" value="Move Up" id="moveup" ng-click="getval(P,$index)" /></td>
<td>
<input type="button" value="Move Down" /></td>
</tr>
</table>
</div>
это код angularjs
<script>
var app = angular.module('myapp', []);
var prod = null;
var mveup = null;
var mvedwn = null;
var ind = null;
app.controller('prodctrl', function ($scope, $http) {
//getting products for each brand
$scope.GetBrandProd = function () {
cursel = "B";
var Id = $('#BrandDropdown').val();
fetchtype = Id;
brid = Id;
$http({
method: "GET",
url: "/Home/GetProdBrand",
params: {
id: Id
}
})
.success(function (response) {
var data = response;
$scope.Products = data;
prod = data;
});
};
//changing color of row when clicked
$scope.setselected = function (index) {
if ($scope.lastSelected) {
$scope.lastSelected.selected = '';
}
if (mveup == null) {
this.selected = 'trselected';
$scope.lastSelected = this;
}
else {
mveup = null;
//this.selected = '';
$(this).closest('tr').prev().prop('Class', 'trselected');
}
};
//function to move product up in ranking
$scope.getval = function (p, index) {
var Idcur = p.Id;
var Rankcur = p.Rank;
ind = index;
if ($scope.Products[index - 1] != null) {
var IdPrev=$scope.Products[index - 1].Id;
var Rankprev = $scope.Products[index - 1].Rank;
mveup = null;
$scope.lastSelected = this;
if (cursel == "B") {
fetchtype = brid;
}
else if (cursel == "C") {
}
mveup = true;
$http({
method: "GET",
url: "/Home/MoveProd",
params: {
Curid: Idcur,
CurRank: Rankcur,
ChngId: IdPrev,
ChngRnk: Rankprev,
Type: cursel,
Id: fetchtype
}
})
.success(function (response) {
// ranks are interchanged and the data is returned.
var data = response;
$scope.Products = data;
prod = data;
});
}
}
})
</script>
Похоже, способ обработки выбора строки неверен.
Я только что изменил способ обработки выбора здесь.
<tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" ng-class="{selected: selectedIndex == $index}">
//JS
$scope.setselected = function(index) {
$scope.selectedIndex = index;
};
Кроме того, я сделал plunker с некоторыми образцами, чтобы подражать вашему требованию, вы можете спросить больше, если это не соответствует вашим требованиям.
У вас уже есть идентификатор продукта, на который был Idcur
(я думаю, глядя на ваш код, Idcur
), поэтому вы можете перебирать результаты в блоке success
запроса /Home/MoveProd
GET и устанавливать запись с помощью совпадение идентификатора с выбранным? Что-то вроде
var products = $scope.Products.filter(function(product) {
return product.id == Idcur;
})
if (products && products.length > 0) {
products[0].selected = 'trselected';
}
то на вашей странице просто обновите ng-repeat немного, чтобы выбрать selected
класс из продукта, а не область, поэтому:
<tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" class="{{selected}}">
становится
<tr ng-repeat="P in Products track by $index" ng-click="setselected($index)" class="{{P.selected}}">
или что-то типа того :)