変数値をラベルに渡す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スコープで何かを変更しても、2番目のng-controllerスコープでは何も変更されません。

は、第1のコントローラからのデータを渡すことにより、新しいコントローラの$の範囲を（1つの要素のルートで同じ範囲）の両方のためにどちらか一方のコントローラを使用するか、他に別のコントローラを作成して設定してください

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。それは場面を作る。私はメッセージを警告し、それは2つの異なるスコープを持っていることを意味します。 –

変数値をラベルに渡すangularjs

答えて

関連する問題