將變量值傳遞給標籤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">&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); 
} 
});

來源

2017-06-05 Waqar Ahmed Somra

您已定義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">&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>

來源

2017-06-05 10:58:00 Ashvin777

謝謝@ ashvin777。它確實使場景。我提醒了一條消息，它出現了兩次，這意味着我有兩個不同的範圍。 –

將變量值傳遞給標籤angularjs

回答

相關問題