data-binding html - AngularJS:associa i pulsanti di opzione ai modelli con valori booleani





this (7)


Potresti dare un'occhiata a questo:

https://github.com/michaelmoussa/ng-boolean-radio/

Questo tizio ha scritto una direttiva personalizzata per aggirare il problema che "vero" e "falso" sono stringhe, non booleani.

Ho problemi a collegare pulsanti radio a un oggetto le cui proprietà hanno valori booleani. Sto tentando di visualizzare le domande d'esame recuperate da una risorsa $.

HTML:

<label data-ng-repeat="choice in question.choices">
  <input type="radio" name="response" data-ng-model="choice.isUserAnswer" value="true" />
  {{choice.text}}
</label>

JS:

$scope.question = {
    questionText: "This is a test question.",
    choices: [{
            id: 1,
            text: "Choice 1",
            isUserAnswer: false
        }, {
            id: 2,
            text: "Choice 2",
            isUserAnswer: true
        }, {
            id: 3,
            text: "Choice 3",
            isUserAnswer: false
        }]
};   

Con questo oggetto di esempio, la proprietà "isUserAnswer: true" non causa la selezione del pulsante di opzione. Se incapsula i valori booleani tra virgolette, funziona.

JS:

$scope.question = {
    questionText: "This is a test question.",
    choices: [{
            id: 1,
            text: "Choice 1",
            isUserAnswer: "false"
        }, {
            id: 2,
            text: "Choice 2",
            isUserAnswer: "true"
        }, {
            id: 3,
            text: "Choice 3",
            isUserAnswer: "false"
        }]
};   

Sfortunatamente il mio servizio REST considera questa proprietà come un booleano e sarà difficile modificare la serializzazione JSON per incapsulare quei valori tra virgolette. C'è un altro modo per impostare il binding del modello senza modificare la struttura del mio modello?

Ecco il jsFiddle che mostra oggetti non funzionanti e funzionanti




Il modo in cui le tue radio sono impostate nel violino - condividendo lo stesso modello - farà sì che solo l'ultimo gruppo mostri una radio controllata se decidi di citare tutti i valori di verità. Un approccio più solido implicherà dare ai singoli gruppi il proprio modello e impostare il valore come attributo unico delle radio, come l'id:

$scope.radioMod = 1;
$scope.radioMod2 = 2;

Ecco una rappresentazione del nuovo html:

<label data-ng-repeat="choice2 in question2.choices">
            <input type="radio" name="response2" data-ng-model="radioMod2" value="{{choice2.id}}"/>
                {{choice2.text}}
        </label>

E un violino.




Ho provato a cambiare value="true" a ng-value="true" , e sembra funzionare.

<input type="radio" name="response2" data-ng-model="choice.isUserAnswer" ng-value="true" />

Inoltre, per far sì che entrambi gli input funzionino nel tuo esempio, dovresti dare un nome diverso a ciascun input, ad esempio la response dovrebbe diventare response1 e response2 .




ciao spero che ti aiuti.

 <label class="rate-hit">
     <input type="radio" ng-model="st.result" ng-value="true" ng-checked="st.result">
     Hit
 </label>
 &nbsp;&nbsp;
 <label class="rate-miss">
     <input type="radio" ng-model="st.result" ng-value="false" ng-checked="!st.result">
     Miss
 </label>



L'approccio corretto in Angularjs consiste nell'utilizzare il ng-value per i valori non stringa dei modelli.

Modifica il tuo codice in questo modo:

<label data-ng-repeat="choice in question.choices">
  <input type="radio" name="response" data-ng-model="choice.isUserAnswer" data-ng-value="true" />
  {{choice.text}}
</label>

Rif: direttamente dalla bocca del cavallo




Questo è un approccio strano con isUserAnswer . Invierai davvero tutte e tre le scelte al server in cui passerà in isUserAnswer == true ciascuna per isUserAnswer == true ? Se è così, puoi provare questo:

http://jsfiddle.net/hgxjv/4/

HTML:

<input type="radio" name="response" value="true" ng-click="setChoiceForQuestion(question1, choice)"/>

JavaScript:

$scope.setChoiceForQuestion = function (q, c) {
    angular.forEach(q.choices, function (c) {
        c.isUserAnswer = false;
    });

    c.isUserAnswer = true;
};

In alternativa, ti consiglio di cambiare la virata:

http://jsfiddle.net/hgxjv/5/

<input type="radio" name="response" value="{{choice.id}}" ng-model="question1.userChoiceId"/>

In questo modo puoi semplicemente inviare {{question1.userChoiceId}} nuovo al server.




Ciò che ha funzionato per me è impostare la variabile del modello su {} e questo ripristinerà i pulsanti di opzione sullo stato predefinito (non selezionato). Ovviamente, questo funzionerà solo se i tag dei pulsanti radio sono corretti come nella risposta di tosh.

Nel tuo caso:

$scope.searchBy = { };




angularjs data-binding model radio