Come associare ng-modello ng-caselle

Sto avendo un problema di associazione Angolare ng-check-ng-model, che è ng-model non riconoscere lo stato delle mie caselle di controllo.

Qui è una descrizione(molto più grande base di codice, ma ho adattate per ridurre al minimo il codice).

Al caricamento di una pagina in JavaScript inizializzare i miei prodotti e impostare i valori di default:

$scope.products = {}
$scope.SetProductsData = function() {
    var allProducts;
    allProducts = [
      {
        id: 1,
        name: "Book",
        selected: true
      }, {
        id: 2,
        name: "Toy",
        selected: true
      }, {
        id: 3,
        name: "Phone",
        selected: true
      }]

Ho un master di controllo a mio modo di vedere l’elenco di una casella di controllo per ogni 3 prodotti(libri,Giocattoli e telefono):Questi sono selezionate per impostazione predefinita

<div style="float:left" ng-init="allProducts.products = {}" >
    <div ng-repeat="p in Data.products">
        <div style="font-size: smaller">
            <label><input id="divPlatorm"  ng-model="products[p.name]" ng-init="products[p.name] = true" type="checkbox"/>
                {{p.name}}</label>
        </div>
    </div>
</div>

Quindi una tabella con gli stessi prodotti ripetuto in righe:

<div ng-repeat="line in lineProducts" ng-init="line.products = {}">
    <div id="sc-p-enc" ng-repeat="p in Data.products">
        <div id="sc-p-plat" style="font-size: smaller">
            <label id="pl-label"><input ng-checked="products[p.name]"  ng-model="line.products[p.name]"  ng-init="line.products[p.name] = true" type="checkbox"/>                                    
                {{p.name}}</label>
        </div>
    </div>
</div>

Quando il check/deselezionata, il master di prodotti le caselle di controllo corrispondenti modifiche nelle righe. Quindi, se ho 100 righe (di libri,Giocattoli e telefono) incontrollato Giocattolo posso vedere da dove tutti i giocattoli sono selezionate le righe.

Quando invio i dati per il mio controller, posso ancora vedere tutti i Giocattoli = true, anche se essi sono stati incontrollato.

Se io fisicamente andare a riga, quindi non controllato ogni giocattolo e inviare i dati per il mio controller Giocattoli = False.

Come è possibile ottenere le caselle di controllo selezionate modifica dello stato quando è controllato dal master di i check-box?

Ho seguito il post trovato qui, ma non penso che questo vale per la mia situazione:
AngularJS: ng-model non vincolanti per ng-controllato per caselle di controllo

Ci sono parti di codice mancante. Un violino/plunk sarebbe di aiuto. Più che altro: si riutilizza id all’interno ng-repeat; si tradurrà in molti elementi con lo stesso id del documento. E si utilizza ng-init ampiamente. Credo ng-init inserti logica procedurale in vista, che non è generalmente una buona pratica.

OriginaleL’autore Milligran | 2013-10-02

4 Replies
  1. 5

    Sembra che il ng-checked nella tabella è vincolante per products[p.name], che il ng-model nello schema di controllo in vista anche di associazione a. Ma il ng-model nella tabella è vincolante per un’altra proprietà, line.products[p.name].

    Penso che probabilmente non avrete bisogno di ng-checked nella tabella, in quanto ogni elemento ha la sua ng-model. Così si potrebbe cambiare la vista tabella per

    <label id="pl-label"><input ng-model="line.products[p.name]" type="checkbox"/>{{p.name}}</label>

    e nel controller, modificare il valore corrispondente di line.products[p.name] ogni volta che il valore di products[p.name] è cambiato.

    Se lo rimuovi ng-controllato, le caselle di controllo non modificare nella tabella

    OriginaleL’autore Ethan Wu

  2. 2

    Ho appena risolto questo problema me tramite “ng-init” e “ng-controllato” —

    • ng-selezionata – ‘controllato’ la casella di controllo come modulo è stato caricato
    • ng-init – bound mia casella di controllo html valore di attributo per il modello

    C’è un commento di cui sopra dichiarando che il suo bene non usare ng-init in questo modo, ma non è altra soluzione.

    Qui è un esempio di utilizzo di ng-selezionare invece di ng-controllato:

    <select ng-model="formData.country"> 
    <option value="US" ng-init="formData.country='US'" ng-selected="true">United States</option>
    </select>

    Questa lega “NOI” modello formData.paese, e seleziona il valore al caricamento della pagina.

    E ‘un po’ tardi, ma si dovrebbe essere in grado di aggiungere $scope.formData.country = 'US'; in un controller per eseguire la stessa funzionalità.

    OriginaleL’autore Don F

  3. 0

    Se ho capito bene la funzionalità che si sta tentando di coprire le seguenti violino potrebbe aiutare. Ecco il codice:

    <div style="float:left" ng-app ng-init="products = [
      {
        id: 1,
        name: 'Book',
        line: 'Books',
        selected: true
      }, {
        id: 2,
        name: 'Another Book',
        line: 'Books',
        selected: true
      }, {
        id: 3,
        name: 'Toy',
        line: 'Toys',
        selected: false
      }, {
        id: 4,
        name: 'Another Toy',
        line: 'Toys',
        selected: false
      }, {
        id: 5,
        name: 'Phone',
        selected: true
      }];lineProducts = ['Toys', 'Books']" >
    <div style="float:left">
        <div ng-repeat="p in products">
            <div style="font-size: smaller">
                <label>
                    <input ng-model="p.selected" type="checkbox"/>
                    {{p.name}}
                </label>
            </div>
        </div>
    </div>
    <div ng-repeat="line in lineProducts">
        {{line}}
        <div ng-repeat="p in products | filter:line">
            <div style="font-size: smaller">
                <label>
                    <input ng-model="p.selected" type="checkbox"/>                                    
                    {{p.name}}
                </label>
            </div>
        </div>
     </div>
    </div>

    Anche perché non si dispone di id nel codice html? Con un angolo c’è bisogno in id, e considerando che sono all’interno ng-ripete saranno ambiguo e pertanto inutile comunque.

    Sono anche d’accordo con Nikos sull’uso del ng-init. Io l’ho usato nel mio jsfiddle, perché io sono pigro, non vorrei usare nel codice di produzione

    OriginaleL’autore mfeingold

  4. 0

    Si dovrebbe usare ng-model lì che dovrebbe fornire due modo vincolante. Selezionando e deselezionando il valore di aggiornare il valore del prodotto.selezionato

    <input type="checkbox" ng-model="p.selected"/>

    OriginaleL’autore Wekerle Tibor

Lascia un commento