Winkelradioauswahl nicht korrekt überprüft

In meiner App Angular1.x sind meine Modelle korrekt auf meine Radioauswahl eingestellt, jedoch ist das Optionsfeld selbst nicht ausgewählt, mit Ausnahme des letzten. Nicht wirklich sicher, was das Problem ist. Ich habe unten ein sehr kleines Beispiel erstellt, um dieses Verhalten zu veranschaulichen. Jede Hilfe wird sehr geschätzt.Winkelradioauswahl nicht korrekt überprüft

http://plnkr.co/edit/dgGCvtOEb9WKTNtQHjqd?p=preview

angular.module('todoApp', []) 
 
    .controller('TodoListController', function() { 
 
    var todoList = this; 
 
    todoList.questions = [{ 
 
     "category": "Movies", 
 
     "questions": [{ 
 
      "title": "M1", 
 
      "score": "4", 
 
      }, 
 
      { 
 
      "title": "M2", 
 
      "score": "2", 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "category": "Foods", 
 
     "questions": [{ 
 
      "title": "F1", 
 
      "score": "3", 
 
      }, 
 
      { 
 
      "title": "F2", 
 
      "score": "4", 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "category": "Sports", 
 
     "questions": [{ 
 
      "title": "S1", 
 
      "score": "5", 
 
     }] 
 
     } 
 
    ]; 
 

 
    });

<!doctype html> 
 
<html ng-app="todoApp"> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
    <script src="todo.js"></script> 
 
    <link rel="stylesheet" href="todo.css"> 
 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css"> 
 
    </head> 
 
    <body> 
 
    <h2>Todo</h2> 
 
    <div ng-controller="TodoListController as todoList"> 
 
     <div ng-repeat="(ccKey, cc) in todoList.questions"> 
 
     <hr/> 
 
     <div> 
 
      <b style="color: red;">Category</b> : {{cc.category}} 
 
     </div> 
 
     <div ng-repeat="(qqKey, qq) in cc.questions"> 
 
      <br/> 
 
      {{qq.title}} : Selected Score: {{qq.score}} 
 
      <br/> 
 
      <div ng-repeat="n in [].constructor(5) track by $index"> 
 
      <input type="radio" ng-model="qq.score" name="q-{{ccKey}}-{{qqKey}}" value="{{$index+1}}"><br/>Score: {{$index+1}} : Group: q-{{ccKey}}-{{qqKey}} 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2017-02-01 Jimmy

Versuchen Sie das name Attribut aus <input type="radio"> Tag zu entfernen. Dies scheint einen Konflikt mit dem zu verursachen, was Angular tut, um Ihre Radio-Tags zu verwalten. Ich kann alle ausgewählten Kategorien sehen, und die Auswahlen sind immer noch in einer bestimmten Frage gruppiert.

im Winkeleingang [Radio] docs, sie mit einem name Attribute nicht zeigen: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

Quelle

2017-02-01 22:58:45

Wenn Sie möchten, was die anfängliche Auswahl der Werte ist, wenn die Seite geladen wird, dann

verwenden

ng-value="($index+1).toString()"

Da Ihre Scores als Strings angegeben werden, müssen Sie die Zahl in einen String umwandeln, damit sie mit dem Score übereinstimmen, wenn Sie "ng-value" verwenden. Oder besser, können Sie einfach Ihre Ergebnisse als ganze Zahlen gesetzt und den Rest des Codes unverändert lassen:

todoList.questions = [{ 
     "category": "Movies", 
     "questions": [{ 
      "title": "M1", 
      "score": 4, 
      }, 
      { 
      "title": "M2", 
      "score": 2, 
      } 
     ] 
     }, ....

Here is a modified plunker

Quelle

2017-02-01 23:12:12

Winkelradioauswahl nicht korrekt überprüft

Antwort

Verwandte Themen