将变量值传递给标签angularjs
问题描述:
我是angularjs的新手。我陷入了一个问题,无法找到解决方案。 我有一个表将变量值传递给标签angularjs
Table like this 如果我点击编辑按钮,一个模式弹出窗口 modal like this
我想在分配表从行菜单名称和语言值(从我点击编辑按钮)标签在模态。我试过以下解决方案,但它不工作。
HTML
<body ng-app="VDNApp">
<div class="table-responsive" ng-controller="VDNCtrl">
<table class="table">
<thead>
<tr>
<th style="visibility:hidden; width:0%;">#</th>
<th>Menu Name</th>
<th>VDN Number</th>
<th>VDN Name</th>
<th>Language</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in responseData">
<td style="visibility:hidden; width:0%;" >{{x.id}}</td>
<td>{{x.NameEn}}</td>
<td>{{x.vdnnum}}</td>
<td>{{x.vdnname}}</td>
<td>{{x.language}}</td>
<td><button type="button" ng-click="editVDN(x)" class="btn btn-info btn-lg" data-toggle="modal" data-target="#VDNModal" style="padding:5px 10px !important; font-size:14px !important;">Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="VDNModal" role="dialog" ng-controller="VDNCtrl">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-weight:bold;">Edit VDN Mapping</h4>
</div>
<div class="modal-body">
<div >
<label class="col-sm-3 control-label" style="font-size:14px;">Menu Name: </label>
<label style="font-size:14px; border-color:gray;" >{{VDNNameValue}}</label>
</div>
<br />
<div >
<label class="col-sm-3 control-label" style="font-size:14px;">VDN Language: </label>
<label style="font-size:14px;"> {{VDNlang}}</label>
</div>
<br />
<div>
<label class="col-sm-3 control-label" style="font-size:14px;">VDN Number </label>
<select ng-model="selectedOption" ng-options="option.vdnname + ' ('+option.vdnnum + ')' for option in responseData track by option.id" class="form-control selcls" style="width:300px;">
<option value="" disabled selected >--Select--</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
AngularJS
var app = angular.module('VDNApp', []);
app.controller('VDNCtrl', function ($scope, $http) {
$http.get("http://localhost:26413/api/MenuVDN/GetVDNMapping")
.then(function(response) {
$scope.responseData = response.data.Table;
// console.log($scope.responseData);
});
$scope.VDNNameValue = "val";
$scope.VDNlang = "lang";
$scope.editVDN = function (obj) {
$scope.VDNNameValue = obj.vdnname;
$scope.VDNlang = obj.language;
console.log($scope.VDNNameValue, $scope.VDNlang);
}
});
答
您已定义VDNCtrl控制器的2个不同的作用域。所以在第一个ng-controller作用域中改变任何东西都不会改变第二个ng-controller作用域上的任何东西。
确保从第一控制器传递数据(在一个元素根相同的范围)为使用一个控制器,用于两个或者创建一个不同的控制器和一套新的控制器$范围
var app = angular.module('VDNApp', []);
app.controller('VDNCtrl', function($scope, $http) {
$scope.responseData = [{
id: 1,
NameEn: "test",
vdnnum: "1",
vdnname: "one",
language: "en"
}, {
id: 2,
NameEn: "test",
vdnnum: "1",
vdnname: "two",
language: "en"
}, {
id: 3,
NameEn: "test",
vdnnum: "1",
vdnname: "three",
language: "en"
}];
$scope.VDNNameValue = "val";
$scope.VDNlang = "lang";
$scope.editVDN = function(obj) {
$scope.VDNNameValue = obj.vdnname;
$scope.VDNlang = obj.language;
console.log($scope.VDNNameValue, $scope.VDNlang);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="VDNApp">
<div class="table-responsive" ng-controller="VDNCtrl">
<table class="table">
<thead>
<tr>
<th style="visibility:hidden; width:0%;">#</th>
<th>Menu Name</th>
<th>VDN Number</th>
<th>VDN Name</th>
<th>Language</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in responseData">
<td style="visibility:hidden; width:0%;">{{x.id}}</td>
<td>{{x.NameEn}}</td>
<td>{{x.vdnnum}}</td>
<td>{{x.vdnname}}</td>
<td>{{x.language}}</td>
<td><button type="button" ng-click="editVDN(x)" class="btn btn-info btn-lg" data-toggle="modal" data-target="#VDNModal" style="padding:5px 10px !important; font-size:14px !important;">Edit</button></td>
</tr>
</tbody>
</table>
<div class="modal fade" id="VDNModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-weight:bold;">Edit VDN Mapping</h4>
</div>
<div class="modal-body">
<div>
<label class="col-sm-3 control-label" style="font-size:14px;">Menu Name: </label>
<label style="font-size:14px; border-color:gray;">{{VDNNameValue}}</label>
</div>
<br />
<div>
<label class="col-sm-3 control-label" style="font-size:14px;">VDN Language: </label>
<label style="font-size:14px;"> {{VDNlang}}</label>
</div>
<br />
<div>
<label class="col-sm-3 control-label" style="font-size:14px;">VDN Number </label>
<select ng-model="selectedOption" ng-options="option.vdnname + ' ('+option.vdnnum + ')' for option in responseData track by option.id" class="form-control selcls" style="width:300px;">
<option value="" disabled selected >--Select--</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
谢谢@ ashvin777。它确实使场景。我提醒了一条消息,它出现了两次,这意味着我有两个不同的范围。 –