0

Ich bin eine JSON-Sammlung mitKopieren JSON-Objekt in ng-Modell der One md-Select auf einem anderen md-Select mit AngularJS

$scope.person = [ 
    { 
     "Id": 1 
     "Name": "John" 
    }, 
    { 
     "Id": 2 
     "Name": "Jack" 
    }, 
    { 
     "Id": 3 
     "Name": "Watson" 
    }, 
]; 

bitte meinem einem der Post Copy JSON Object of One Select to another Select ng-model using AngularJS

beziehen hier bin ich mit scharfkantiges Material md-wählen statt HTML Select

In md-select, ng-options funktioniert nicht. Also, helfen Sie mir freundlicherweise, wie Wählen Sie Wert von ersten md-select zum zweiten md-select

Der komplette HTML-Quellcode aktualisieren ist

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>HTML Select using AngularJS</title> 
 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
 

 
    <!-- Angular Material Library --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <div class="md-block"> 
 
     <md-input-container> 
 
      <label>Person</label> 
 
      <md-select ng-model="selected.person"> 
 
       <md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option> 
 
      </md-select> 
 
     </md-input-container> 
 
    </div> 
 
    <hr /> 
 
    <div class="md-block"> 
 
     <md-input-container> 
 
      <label>Copy Person</label> 
 
      <md-select ng-model="selected.copy_person"> 
 
       <md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option> 
 
      </md-select> 
 
     </md-input-container> 
 
    </div> 
 

 
</div> 
 

 
<script> 
 
    var app = angular.module('myApp', ['ngMaterial']) 
 

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

 
     $scope.person = [ 
 
      { 
 
       "Id": 1, 
 
       "Name": "John" 
 
      }, 
 
      { 
 
       "Id": 2, 
 
       "Name": "Jack" 
 
      }, 
 
      { 
 
       "Id": 3, 
 
       "Name": "Watson" 
 
      } 
 
     ]; 
 

 
     $scope.selected = { 
 
      person: null, 
 
      copy_person:null 
 
     }; 
 

 
     $scope.$watchCollection('selected.person', function (newData, oldDaata) { 
 
      var obj = JSON.parse(newData); 
 
      if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id != "0")) { 
 
       var name = obj.Name; 
 
       alert(name); 
 
       $scope.selected.copy_person = obj; 
 
      } 
 
     }); 
 

 
    }); 
 
</script> 
 
</body> 
 
</html>

Ich habe zwei Angular Materialien md - Wählen Sie mit derselben JSON Collection. Ich wählte eine Person Watson in der ersten md-wählen Sie "Person", dann muss ich die gleiche in der zweiten md aktualisieren-wählen Sie "Person kopieren". Aber ich kann nicht aktualisieren.

Ich binde das JSON-Objekt als ein Wert in der md-Optionen auszuwählen, anstatt Id oder Name des

helfen mir bitte, wie in md-select zu aktualisieren?

Antwort

0

Anstatt ein Objekt zuzuweisen, geben Sie einfach den ursprünglichen Wert ein.

Derzeit verwenden Sie diesen Ansatz:

$scope.selected.copy_person = JSON.Parse(newData); 

Ändern Sie einfach die Logik

$scope.selected.copy_person = newData; 

Die komplette Version ist

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>HTML Select using AngularJS</title> 
 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 
 

 
    <!-- Angular Material Library --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <div class="md-block"> 
 
     <md-input-container> 
 
      <label>Person</label> 
 
      <md-select ng-model="selected.person"> 
 
       <md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option> 
 
      </md-select> 
 
     </md-input-container> 
 
    </div> 
 
    <hr /> 
 
    <div class="md-block"> 
 
     <md-input-container> 
 
      <label>Copy Person</label> 
 
      <md-select ng-model="selected.copy_person"> 
 
       <md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option> 
 
      </md-select> 
 
     </md-input-container> 
 
    </div> 
 

 
</div> 
 

 
<script> 
 
    var app = angular.module('myApp', ['ngMaterial']) 
 

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

 
     $scope.person = [ 
 
      { 
 
       "Id": 1, 
 
       "Name": "John" 
 
      }, 
 
      { 
 
       "Id": 2, 
 
       "Name": "Jack" 
 
      }, 
 
      { 
 
       "Id": 3, 
 
       "Name": "Watson" 
 
      } 
 
     ]; 
 

 
     $scope.selected = { 
 
      person: null, 
 
      copy_person:null 
 
     }; 
 

 
     $scope.$watchCollection('selected.person', function (newData, oldDaata) { 
 
      var obj = JSON.parse(newData); 
 
      if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id != "0")) { 
 
       var name = obj.Name; 
 
       alert(name); 
 
       $scope.selected.copy_person = newData; 
 
      } 
 
     }); 
 

 
    }); 
 
</script> 
 
</body> 
 
</html>

Standardmäßig weist der Value-Teil das JSON-Objekt als String zu, wie in Ihrem Beitrag Bind JSON Object as a Value in AngularJS HTML Select - Dropdown. Vergleiche einfach den Wert als String anstelle von JSON-Objekt.

0

Leider md-select nicht ng-Optionen ...

Und ng-Wiederholung kann nicht binden mit ng-Modell der ausgewählten Komponente unterstützen.