select-Tag mit ng-Modell nicht die richtige Option zeigt

Also das ist mein Code:select-Tag mit ng-Modell nicht die richtige Option zeigt

<select ng-model="institution.data_collection" class="form-control" required> 
    <option value="" disabled>Please Select</option> 
    <option value="109">24 Hours</option> 
    <option value="107" onselect="">School Hours</option> 
</select>

institution.data_collection Wert gleich 109 und ich erwartete die Option 24 Hours ausgewählt werden, da sie einen Wert von 109 hat. Aber was passiert ist, finde ich eine neue Option in dem select-Tag hinzugefügt:

<option value="? number:109 ?"></option>

durch SO gehen Fragen finde ich, dass die meisten Menschen die options in einem Array definiert in der Steuerung, die die bessere Praxis, dass seine Fall und würde mein Problem lösen, aber ich möchte immer noch verstehen, was passiert.

Quelle

2017-01-09 Naguib Ihab

entfernen 'ng-selected' von 109, ja mit Array-Form wählen ist bessere Option .. –

@ atulquest93 ich eine andere Lösung auszuprobieren und vergessen, dass es, aber ich doesn‘ Auswirkungen auf das aktuelle Szenario haben. –

Sie müssen die $ scope Variable in der Steuerung

$scope.institution ={}; 
$scope.institution.data_collection = '109';

DEMO einstellen

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

 
app.controller("ListCtrl", ["$scope", 
 
    function($scope) { 
 
    $scope.institution ={}; 
 
    $scope.institution.data_collection = '109'; 
 
    } 
 
]);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app='app'> 
 
    <div ng-controller="ListCtrl"> 
 
    <select ng-model="institution.data_collection" class="form-control" required> 
 
    <option value="" disabled>Please Select</option> 
 
    <option value="109" ng-selected="">24 Hours</option> 
 
    <option value="107" onselect="">School Hours</option> 
 
</select> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-01-09 05:43:58 Sajeetharan

Das hat funktioniert, Sie denken also, dass die $ scope.institution.data_collection eine Zahl ist und der Wert in den Optionen-Tags Strings sind? –

Danke. Es funktionierte, als ich es in eine Zeichenfolge wie folgt analysierte: $ scope.institution.data_collection = $ scope.institution.data_collection.toString(); –

als Antwort markieren, wenn es geholfen hat – Sajeetharan

Make $scope.institution.data_collection = "109", muss es funktionieren. Jedes HTML-Element legt seinen Wert als Zeichenfolge und nicht als Zahl fest. Daher müssen Sie seinem Modell einen String-Wert zuweisen, damit es ordnungsgemäß funktioniert. Eine andere Option ist die Verwendung von ng-Optionen, dann können Sie einen numerischen Wert als Modell zuweisen.

Quelle

2017-01-09 05:40:17

<select ng-model="institution.data_collection" ngChange="expression()" class="form-control" required> 
    <option value="?">Please Select</option> 
    <option value="109">24 Hours</option> 
    <option value="107">School Hours</option> 
</select>

Sie sollten nicht "onselect" für die Option schreiben, müssen Sie um dieses Attribut einem Tag zuzuweisen.

Script:

$scope.expression = function(){ 
$scope.institution // selected value 
// write your logic here 
}

Quelle

2017-01-09 06:05:40

select-Tag mit ng-Modell nicht die richtige Option zeigt

Antwort

Verwandte Themen