提问人：Pinki Sharma 提问时间：11/7/2023 更新时间：11/7/2023 访问量：9
编辑时绑定选择下拉列表值 （AngularJs）
Bind Select dropdown value in case of edit (AngularJs)
问：
我正在尝试在编辑用户时绑定选择下拉列表值。每行都有一个编辑操作选项。它不绑定用户部门名称。
我正在显示部门名称并获取部门 ID 的值。当我编辑特定用户时如何绑定下拉值。
Plunker 链接 -https://plnkr.co/plunk/n1NYxFoKz2CLlsQm
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Table with ng-table module Example
</title>
<script src="https://code.angularjs.org/1.8.2/angular.js"></script>
<script src="http://code.angularjs.org/1.8.2/angular-resource.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/bundles/ng-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bundles/ng-table.min.js"></script>
<style>
</style>
<script type="text/javascript">
var app = angular.module("ngtableApp", ["ngTable"]);
app.controller("ngtableCtrl", function ($scope, $filter, NgTableParams) {
$scope.users =[];
$scope.isEdit = false;
$scope.myData = [];
$scope.data = [];
$scope.users = [
{ id:1,name: "Madhav Sai", age: 10, location: 'Nagpur',departName: "Arts" },
{ id:2,name: "Suresh Dasari", age: 30, location: 'Chennai' ,departName: "Science" },
{ id:3,name: "Rohini Alavala", age: 29, location: 'Chennai' ,departName: "Maths" },
{ id:4,name: "Praveen Kumar", age: 25, location: 'Bangalore',departName: "Science" },
{ id:5,name: "Sateesh Chandra", age: 27, location: 'Vizag' ,departName: "Arts" },
{ id:6,name: "Siva Prasad", age: 38, location: 'Nagpur',departName: "Maths" },
{ id:7,name: "Sudheer Rayana", age: 25, location: 'Kakinada' ,departName: "Science" },
{id:8, name: "Honey Yemineni", age: 7, location: 'Nagpur',departName: "Arts" },
{ id:9,name: "Mahendra Dasari", age: 22, location: 'Vijayawada' ,departName: "Maths" },
{ id:10,name: "Mahesh Dasari", age: 23, location: 'California',departName: "Science" },
];
$scope.departments =
[
{depId:1, departName:"Science"},
{depId:2, departName:"Arts"},
{depId:3, departName:"Maths"}];
$scope.usersTable = new NgTableParams({
page: 2,
count: 30,
sorting : {
name : 'desc'
}
},
{
counts:[],
total: $scope.users.length,
getData:function (params) {
$scope.myData = angular.copy($scope.users, []);
var filteredData = params.filter() ? $filter('filter')($scope.myData, params.filter()) : $scope.myData;
var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
// $scope.data = $scope.data.slice(0, 20);
params.total(orderedData.length);
$scope.data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
console.log('params '+ JSON.stringify(params));
if ($scope.data.length === 0 && params.page() !== 1){
params.page(params.page()-1);
filteredData = params.filter() ? $filter('filter')($scope.myData, params.filter()) : $scope.myData;
orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
params.total(orderedData.length);
$scope.data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
}
return $scope.data;
1
}
});
$scope.editUser = function(obj){
$scope.user = obj;
}
$scope.saveUser = function(){
console.log($scope.user);
const dbUser = {
name:$scope.user.name,
departName:$scope.user.departName
}
console.log(dbUser);
}
});
</script>
</head>
<body ng-app="ngtableApp">
<div ng-controller="ngtableCtrl">
<h2>AngularJS ng-table Filtering Example</h2>
<button class="btn btn-primary" ng-click="createNewUser()">Create User</button>
<div id="tblId">
<div class="tbl-container">
<div >
<table ng-table ="usersTable" show-filter=true class="table table-bordered table-striped">
<tr ng-repeat="user in data">
<td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">{{user.name}}</td>
<td data-title="'Age'" sortable="'age'" filter="{ 'age': 'text' }">{{user.age}}</td>
<td data-title="'Department'" sortable="'departName'" filter="{ 'departName': 'text' }">{{user.departName}}</td>
<td data-title="'Location'" sortable="'location'" filter="{ 'location': 'text' }">{{user.location}}</td>
<td data-title="'Action'" data-ng-click="editUser(user)" >edit</td>
</tr>
</table>
</div>
</div>
</div>
<div >
<div class="modal-header">
<h4 class="inline-block">Create User</h4>
</div>
<div class="modal-body">
<form name="userForm" id="userForm" class="form-horizontal" novalidate>
<fieldset>
<div id="user-information-section">
<div class="control-group">
<label class="control-label required" for="name" data-ng-click="enableForm()">User Name:</label>
<div class="controls">
<input type="text" id="name" name="name" data-ng-model="user.name" data-ng-maxlength="30" maxlength="30" required autofocus class="mousetrap">
</div>
</div>
<div class="control-group">
<label class="control-label required" for="departName" data-ng-click="enableForm()">Department Name:</label>
<div class="controls">
<select name="departName" id="departName" class="active-view-dropdown" data-ng-model="user.departName" required ng-options="dep as dep.departName for dep in departments"
>
<option value=""></option>
</select>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<span class="pull-right">
<button class="btn btn-small btn-primary" data-ng-click="saveUser()" >Ok</button>
<button class="btn btn-small" data-ng-click="showNewUserModal = false">Cancel</button>
</span>
</div>
</div>
</div>
</body>
答： 暂无答案
评论