2016-08-22 4 views
1
<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 

<body> 

    <div ng-app="canerApp" ng-controller="canerCtrl"> 

    <button ng-click="click()"> 
     Button click 
    </button> 

    <p ng-show="isClicked"> 

     name= 
     <input type="text" ng-model="caner.name"> 
     <br> surnanme= 
     <input type="text" ng-model="caner.surname"> 
     <br> age 

     <select ng-model="caner.age"    
     ng-options=" person.age for person in peole" > </select>  

     <br> Welcome Message: {{ caner.name + " " + caner.surname+" "+caner.age}} 
    </p> 
    </div> 

    <script type="text/javascript"> 
    var app = angular.module('canerApp', []); 

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

     $scope.caner = { 

     name: "caner", 
     surname: "aydin", 

age: "22", 
     }; 

     $scope.peole = [{ 
     age: 1, 
     name: 'Bob' 
     }, { 
     age: 2, 
     name: 'Alice' 
     }, { 
     age: 3, 
     name: 'Steve' 
     }]; 

     $scope.isClicked = true;  

     $scope.click = function() { 
     $scope.isClicked = !$scope.isClicked; 
     }; 
    }); 
    </script> 

</body> 

</html> 

hierWinkel js nicht Wert von Auswahlbox nehmen

gesehen werden kann

, wenn ich 3 zum Beispiel wählen, Ausgang wird

Willkommen Nachricht: Caner Aydin [object Object]

bekomme ich den Wert hier

<select ng-model="caner.age" 

    ng-options=" person.age for person in peole" > 

in contrller

$scope.peole = [{ 
     age: 1, 
     name: 'Bob' 
     }, { 
     age: 2, 
     name: 'Alice' 
     }, { 
     age: 3, 
     name: 'Steve' 
     }]; 

sollte es 3 geben, nicht Objekt-Objekt-Ausgabe. Ich gebe zu caner.age, um Ausgabe zu geben.

Antwort

0

Das wird das Objekt an Ihr ng-Modell binden. Bedeutung, dass caner.age

{ 
    age: 3, 
    name: 'Steve' 
} 

wird, wenn Sie

Welcome Message: {{ caner.name + " " + caner.surname+" "+caner.age.age}} 

verwenden sollte es funktionieren. Ich hoffe, dass Sie hier erfahren, wie Sie Ihren Code umgestalten können.

1

Ändern Sie das Dropdown-Tag wie folgt.

<select ng-model="caner.age" 

     ng-options=" person.age as person.age for person in peole" > 







    </select> 
0

ändern caner.age.age statt caner.age

var app = angular.module('canerApp', []); 
 

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

 
     $scope.caner = { 
 

 
     name: "caner", 
 
     surname: "aydin", 
 

 
age: "22", 
 
     }; 
 

 
     $scope.peole = [{ 
 
     age: 1, 
 
     name: 'Bob' 
 
     }, { 
 
     age: 2, 
 
     name: 'Alice' 
 
     }, { 
 
     age: 3, 
 
     name: 'Steve' 
 
     }]; 
 

 

 

 

 

 
     $scope.isClicked = true; 
 

 

 

 

 
     $scope.click = function() { 
 
     $scope.isClicked = !$scope.isClicked; 
 
     }; 
 
    });
<!DOCTYPE html> 
 
<html> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 

 
<body> 
 

 
    <div ng-app="canerApp" ng-controller="canerCtrl"> 
 

 
    <button ng-click="click()"> 
 
     Button click 
 
    </button> 
 

 
    <p ng-show="isClicked"> 
 

 
     name= 
 
     <input type="text" ng-model="caner.name"> 
 
     <br> surnanme= 
 
     <input type="text" ng-model="caner.surname"> 
 
     <br> age 
 

 
     <select ng-model="caner.age" 
 

 
     ng-options="person.age for person in peole" > 
 

 

 

 

 

 

 

 
     </select> 
 

 

 
     <br> Welcome Message: {{ caner.name + " " + caner.surname+" "+caner.age.age}} 
 
    </p> 
 

 

 
    </div>

0

Ihr Problem:

Sie binden das Objekt person zum ng- Modell caner.age mit Ihren ng-Optionen:

<select ng-model="caner.age" 
    ng-options="person.age for person in peole" > 
</select> 

Das ist, warum Sie bekommen [Objekt] [Objekt] in Ihrem Winkel Ausdruck {{caner.age}}

Lösung:

Während es {{caner.age.age}} ist eine gültige Lösung zu ändern, mögen Sie vielleicht zu prüfen, Korrigieren Sie Ihre ng-Modell-Bindung, um den tatsächlichen Alterswert anstelle des Personenobjekts wie folgt zu binden:

Warum es so geschrieben werden muss, siehe Dokumentation: ng-options documentations