将变量值传递给标签angularjs

时间：2017-06-05 10:37:04

标签： javascript html 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">&times;</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);
}
});

1 个答案:

答案 0 :(得分：0)

您已定义了2个不同范围的VDNCtrl控制器。因此，改变第一个控制器范围内的任何内容都不会改变第二个控制器范围内的任何内容。

确保为两者使用任一个控制器（在一个元素根目录中使用相同的作用域），或者创建一个不同的控制器并通过从第一个控制器传递数据来设置新控制器的$ scope

＆＃13;
＆＃13; 
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);
  }
});
＆＃13; 
<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">&times;</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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题