Auftrag des Objekts geändert wird

Question

ich dynamische Daten binden möchten, nachdem ich die Daten die Reihenfolge der Daten binden, wird

var app = angular.module("mainApp", []); 
 

 
app.controller('mainCtrl', function($scope){ 
 
    $scope.fieldNames = { author_name: "Author Name", about_author: "About author", author_image : "Author Image" }; 
 
    $scope.authors = [{author_name: 'akshay', about_author:'this is about author', author_image:'image url here'}]; 
 
    console.log($scope.authors); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="mainApp" ng-controller="mainCtrl"> 
 

 
    <div ng-repeat="author in authors" class="authorAndTagGroup"> 
 
     <div ng-repeat="(key, value) in author"> 
 
     <label class="col-sm-3 control-label">{{fieldNames[key]}}</label> 
 
     <input type="text" ng-model="author[key]"> 
 
     </div> 
 
    </div> 
 

 
</div>

wollen verändert immer ich wie

Autor anzuzeigen Name: akshay

Über den Autor: Dies ist der Autor

author_image: Bild URL hier

Answer 1

Ja, das Problem wird gelöst, wenn Sie eine höhere Version verwenden, in der dieses Problem gelöst wurde (z. B.->1.5.3).

Working Demo

Ich schlage vor, Sie bei der Migration doc einen Blick zu haben. Es wird Ihnen helfen, zukünftige Probleme zu vermeiden.

: die Reihenfolge der Elemente

Aufgrund c260e738, vorher, wenn ngRepeat zu Iterierte über Objekteigenschaften wurde unter Verwendung von Sortieren der Schlüssel in alphabetischer Reihenfolge konsistent sein garantiert.

nun die Reihenfolge der Elemente ist Browser abhängig basierend auf der Reihenfolge von Iterieren über das Objekt zurückgegeben mit der for key in obj Syntax.

Es scheint, dass Browser im Allgemeinen der Strategie folgen, die Schlüssel in der Reihenfolge zu liefern, in der sie definiert wurden. Es gibt jedoch Ausnahmen , wenn Schlüssel gelöscht und wieder aktiviert werden. Siehe https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete#Cross-browser_issues

Der beste Ansatz Objekte in Arrays durch einen Filter, wie als https://github.com/petebacondarwin/angular-toArrayFilter oder einem anderen Mechanismus zu konvertieren und sie dann manuell sortiert werden in der Reihenfolge, die Sie benötigen.

Answer 2

Sie sollten immer Ihre Eigenschaftsnamen explizit definieren, da die Reihenfolge für jede (wie ng-repeat) Schleifen nie garantiert ist.

So würde ich eine einzige Schleife empfehlen (anstelle einer verschachtelten Schleife), wie folgt:

<div ng-repeat="author in authors" class="authorAndTagGroup"> 
    <label class="col-sm-3 control-label">Author Name</label> 
    <input type="text" ng-model="author_name"> 
    <label class="col-sm-3 control-label">About Author</label> 
    <input type="text" ng-model="about_author"> 
    <label class="col-sm-3 control-label">Author Image</label> 
    <input type="text" ng-model="author_image"> 
</div> 

Answer 3

Das Problem gelöst wurde, wenn ich meine abgewinkelte Ausführung geändert am 1.2.23 bis 1.5.3