ng-geprüft und ng-ändern Sie den radio-button funktionieren nicht zusammen - angularjs

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

js

angular.module("sampleapp", []).controller('samplecontroller', function($scope,$rootScope) {
  $scope.radii = [
    {id:.25, checked:false, name:"1/4 Mile"},
    {id:.5, checked:false, name:"1/2 Mile"},
    {id:1, checked:false, name:"1 Mile"},
    {id:2, checked:true, name:"2 Mile"},
    {id:3, checked:false, name:"3 Mile"},
    {id:4, checked:false, name:"4 Mile"},
    {id:5, checked:false, name:"5 Mile"}
];

$scope.handleRadioClick = function(){
    alert();

};
});

und html 

          <div class="radio">
            <label>
              <input type="radio" name="radius"

                   ng-change="handleRadioClick()"
                   ng-checked="radius.checked">

              {{radius.name}}

            </label>
          </div>

      </li>

Hinweis "2 Meile" radio-Eingang aktiviert ist auf der Grundlage der Radien Umfang Struktur. Warum nicht das ng-ändern Sie die Funktion auslösen?

Wenn ich hinzufügen ng-Modell, wird die Funktion ausgelöst wurde, aber die ng-checked funktioniert nicht.

InformationsquelleAutor webmandman | 2014-08-23
  1. 9

    Dies ist, weil Sie nicht mit ng-model:

    GABEL-PLUNKER

    <div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick(selectedRadius)"
         ng-model="radius.checked">

    {{radius.name}}

  </label>
</div>

    UPDATE:

    Tut mir Leid, dass ich nicht bemerkt, dass Sie wollte, einen Standard-radio-button aktiviert, wenn das der Fall ist, dann die Annäherung, die Sie nehmen sind, ist falsch. Sie müssen berücksichtigen, dass das Modell als nicht-individuelle Teile, die in einer Gruppe von radio-buttons, aber als ganzes, Sie sollen einen Wert statt. Sie müssen nicht zu verwenden ng-repeat's radio-scope-variable verwenden Sie stattdessen ein anderes ng-model als selectedRadius Modell. Sie sind input-radio muss einen Wert haben, und in diesem Fall wir ll verwenden ng-value um zu bestimmen den aktuellen Wert des Modells.

    AKTUALISIERT PLUNKER [2014 September]

    JAVASCRIPT

    Controller

      $scope.radii = [
    {id:.25, name:"1/4 Mile"},
    {id:.5, name:"1/2 Mile"},
    {id:1, name:"1 Mile"},
    {id:2, name:"2 Mile"},
    {id:3, name:"3 Mile"},
    {id:4, name:"4 Mile"},
    {id:5, name:"5 Mile"}
  ];

  //selected value is {id:2, name:"2 Mile"}
  $scope.selectedRadius = $scope.radii[3];

    HTML

    <div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick(radius)"
         ng-model="selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>
</div>

    AKTUALISIERT PLUNKER [2015 Januar]

    dcz.switcher problem unten vorgeschlagen, dass die Lösung oben nicht ausgelöst ng-change event-handler, wenn ein radio-button ist reselected. Das Hauptproblem war, dass die ng-model bezog sich auf die ng-repeat's Umfang und nicht zu den controller-scope aus der zweiten ändern. Um dieses problem zu lösen Sie können das $parent Eigenschaft. Eine alternative wäre die Verwendung controllerAs alias und den alias selbst Zugriff auf den controller-Eigenschaft. Um zu verstehen, mehr über die Bereiche in AngularJS, ich schlage vor, Sie Lesen Sie mehr über es hier.

    HTML

    <div class="radio" ng-repeat="radius in radii" id="selectradius-{{radius.id}}">
  <label>
    <input type="radio" name="radius"

         ng-change="handleRadioClick($parent.selectedRadius)"
         ng-model="$parent.selectedRadius"
         ng-value="radius">

    {{radius.name}}

  </label>
</div>
    • Obwohl, bedeutet dies nicht, Aufruf meiner Funktion, die Standard-radio ist nicht mehr geprüft. Also ich gebe auf das, weil anscheinend gibt es keine Möglichkeit beides zu tun, was ich will. Ich hoffe nur, dass jeder hier versteht meine einfache Anfrage und versteht, dass es keine Lösung gibt.
    • Überprüfen Sie bitte mein update in Bezug auf Ihr problem.
    • ah, so einfach. Ich bekomme es jetzt. ich danke Ihnen so sehr.
    InformationsquelleAutor ryeballar
  2. 4

    Default-Werte verwenden und alles wird wie ein Zauber funktioniert, keine Notwendigkeit zu $beobachten, Umfang oder nichts... und Sie müssen ja ng-model

    • ng-Modell - macht die ganze Arbeit
    • ng-geprüft - stellt sicher, dass Sie ÜBERPRÜFT haben-Attribut vorhanden
    • ng-change - auslösen wird Ihre Funktion Ändern

    HTML-Beispiel:

    <input type="checkbox" 
    ng-model="row.active"
    ng-checked="row.active"
    ng-true-value="1"
    ng-false-value="0"
    ng-change="update(row)"
/>
<!-- test -->
{{ row.active }}

    JS optional:

    $scope.update = function(row) {
    console.log('row.active');
}
    InformationsquelleAutor Playnox
  3. 2

    Dies ist, weil ng-change erfordert ngModel anwesend zu sein.

    Hoffe, das hilft. Prost!

    InformationsquelleAutor jleljedal
  4. 0

    Den ng-change Richtlinie erfordert die ng-model Richtlinie vorhanden sein.

    Aus der Docs:

    ngChange

    Hinweis: diese Richtlinie erfordert ngModel anwesend zu sein.

    — AngularJS ng-änderung der Richtlinie API-Referenz

    Die ng-model und ng-checked Richtlinien sollten nicht zusammen verwendet werden

    Aus der Docs:

    ngChecked

    Legt den checked-Attribut für das element, wenn der Ausdruck innerhalb ngChecked ist truthy.

    Beachten Sie, dass diese Richtlinie sollte nicht verwendet werden, zusammen mit ngModel, da dies zu unerwartetem Verhalten führen.

    — AngularJS ng-Richtlinie überprüft die API-Referenz

    Stattdessen legen Sie die gewünschten Initialen Wert aus der Steuerung.

    Weitere Informationen finden Sie unter

    InformationsquelleAutor georgeawg
Schreibe einen Kommentar