Werte zu Angular-ui modal zuweisen

Ich denke, ich habe einige ziemlich große Löcher in meinem Code, als wenn das Modal erscheint, der Inhalt aus der Tabelle (die beim Klicken auf eine Zeile das modale erzeugt), füllt nicht die Eingabefelder, die ich innerhalb des Modals habe. Ich denke, dass ich die Situation falsch angehen werde und eine gewisse Richtung wäre fantastisch.Werte zu Angular-ui modal zuweisen

Mein JS:

var app = angular.module('peopleInformation', ['ngAnimate','ui.bootstrap']); 

app.controller('myCtrl', function($scope, $http, $uibModal) { 

$http.get("Assignment005.json").success(function(response){ 
    $scope.myData = response.People; 
}); 

$scope.modify = function(currentData){ 

    var modalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: 'myModalContent.html', 
     controller:function($scope, $uibModalInstance, details){ 
       $scope.FirstName = details.FirstName; 
       $scope.LastName = details.LastName; 
       $scope.Age = details.Age; 
       $scope.Nickname = details.Nickname; 

      $scope.update = function() { 
       $uibModalInstance.dismiss('cancel'); 
      }; 
     }, 
     size: 'lg', 
     resolve: { 
      details: function() { 
       return currentData; 
      } 
     } 
    }); 

}; 
});

Mein modal:

   <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Your row of data</h4> 
       </div> 
       <div class="modal-body" name="modelData" style="height:200px"> 
        <form class="form-horizontal pull-left form-width" role="form"> 
         <div class="form-group"> 
         <label class="control-label col-sm-4" for="first">First Name:</label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" id="first" ng-model="FirstName"> 
         </div> 
         </div> 
         <div class="form-group"> 
         <label class="control-label col-sm-4" for="last">Last Name:</label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" id="last" ng-model="LastName"> 
         </div> 
         </div> 
         <div class="form-group"> 
         <label class="control-label col-sm-4" for="age">Age:</label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" id="age" ng-model="Age"> 
         </div> 
         </div> 
         <div class="form-group"> 
         <label class="control-label col-sm-4" for="nick">Nickname:</label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" id="nick" ng-model="Nickname"> 
         </div> 
         </div> 
        </form> 
       </div> 
      <div class="modal-footer"> 
     <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancel</button> 
     <button type="button" class="btn btn-success pull-right" data-dismiss="modal">Submit</button> 
     </div> 
    </div>

Haupt HTML, falls es benötigt wird:

<body> 
<div data-ng-app="peopleInformation" data-ng-controller="myCtrl" class="jumbotron"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Essential Information</div> 
      <div class="table-responsive"> 
       <table class="table table-hover"> 
        <thead> 
         <tr> 
         <th>First Name</th> 
         <th>Last Name</th> 
         <th>Age</th> 
         <th>Nickname</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr data-ng-repeat="details in myData" data-ng-click="modify(details)"> 
         <td>{{ details.FirstName }}</td> 
         <td>{{ details.LastName }}</td> 
         <td>{{ details.Age }}</td> 
         <td>{{ details.Nickname }}</td> 
         </tr> 
        </tbody>      
       </table> 
       <button type="button" class="btn btn-info pull-right" data-ng-click="new()">Add 
       </button> 
      </div> 
     </div> 
    <div ng-include="myModalContent.html"></div> 
</div> 
</body>

Im sehr neu Eckige zu verwenden wenn Sie also offen sein könnte Einfach mit mir das würde helfen, Dinge zu klären, obwohl wieder jede Hilfe geschätzt wird.

Quelle

2016-06-14 Callum

Wie ist 'modify' genannt ? –

In meinem Haupt-HTML (es ist sperrig, also habe ich es nicht gepostet, aber hier ist der Anruf). Es wird an jede Zeile meiner Tabelle angehängt. Wenn Sie auf die Tabellenzeile klicken, wird das Modal angezeigt und die Felder sollten ausgefüllt werden. "data-ng-click =" ändern (Details) " – Callum

In Ihrer HTML-Datei übergeben Sie verschiedene Parameter, um die Funktion zu modifizieren. Sie sollte dem in der ng-repeat-Direktive angegebenen Parameter entsprechen. Also in diesem Fall diese:

<tr data-ng-repeat="data in myData" data-ng-click="modify(details)">

wird geworden:

<tr data-ng-repeat="details in myData" data-ng-click="modify(details)">

Quelle

2016-06-14 07:53:25

Dies erzeugt einen Fehler, Sie brauchen den Funktionsaufruf, damit er weiß, wohin er gehen muss, um die Daten zurückzugeben, glaube ich. – Callum

Wieder ist dies meine Schuld für die Veröffentlichung alten Codes, I Das Problem wurde behoben, aber ich habe vergessen zu aktualisieren, ich werde es jetzt tun, aber ich denke, dass ich mein eigenes Problem gelöst habe, wie in meiner Antwort unten, vielen Dank für Ihre Hilfe, sehr geschätzt – Callum

Ich war eigentlich die Werte an der falschen Stelle zuweisen, glaube ich. Ich zog das:

$scope.FirstName = details.FirstName;

Außerhalb der var modalInstance variabel, und sie sind jetzt die Eingabefelder bevölkern. Wenn dies unordentlich oder nicht Standard ist, dann lassen Sie mich wissen, dass manchmal das richtige Ergebnis nicht immer die richtige Methode ist. Danke für die, die versucht haben zu helfen, sehr geschätzt.

Quelle

2016-06-14 08:17:12 Callum

Ich denke, Sie müssen .. geben Umfang zu Ihrem Modalinstanz, damit es funktioniert –

$ Umfang in die modale Instanz übergeben innerhalb des Controllers sehen: var modalInstance = $ uibModal.open ({ Animation: true, templateUrl: ‚myModalContent. html ', Controller: Funktion ($ scope, $ uib ModalInstance, Details) – Callum

Ich spreche nicht über diesen Bereich.fügen Sie einen Parameter in modalen Instanzparametern hinzu, wie zum Beispiel: scope: $ scope, –

Bellow ist der Winkel Modalinstanz Controller

app.controller('ModalInstanceCtrl', function ($scope, 
$uibModalInstance, item) { 

    $scope.customer = item; 

    $scope.yes = function() { 
    $uibModalInstance.close(); }; 

    $scope.no = function() { 
    $uibModalInstance.dismiss('cancel'); 
    }; 
});

unten der Code für die Anrufwinkel modal ist

$scope.open = function (item) { 
    var modalInstance = $uibModal.open({ 
     animation: true, 
     scope: $scope, 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     size: 'md', 
     resolve: { 
     item: function() { 
      return item; 
     } 
     } 
    }); 

    modalInstance.result.then(function (selectedItem) { 
     $log.info(selectedItem); 
     }); 
    }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
    };

Bellow ist Code für Vorlage

<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">Re-calculate retail price</h3> 
    </div> 
    <div class="modal-body"> 
     Margin percent of selected customer is <b>{{ customer.margin_percent }}</b> <br /> 
     Do you want to recalculate the retail price? 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" type="button" ng-click="yes()">Yes</button> 
     <button class="btn btn-warning" type="button" ng-click="no()">No</button> 
    </div> 
</script>

Quelle

2016-06-14 08:28:46 Santi

Die Vorlage und der Modular/Modal-Instanzcontroller AngularJS stimmen nicht überein? Jedoch habe ich kürzlich meine Arbeit jetzt, danke für die Antwort! – Callum

templateUrl: 'myModalContent.html', Controller: 'ModalInstanceCtrl', sind verantwortlich für die Übereinstimmung zwischen Vorlage und modaler Instanz – Santi

Danke @Callum für die Bearbeitung. Ich denke, Sie müssen $ scope nicht an modal übergeben, da es einen separaten Bereich für den modalen Controller gibt. Sie übergeben nur die erforderlichen Parameter an die modale Instanz – Santi

Werte zu Angular-ui modal zuweisen

Antwort

Verwandte Themen