Modification du modèle ng pour l'entrée dans ng-repeat en fonction du contenu


Stefan

J'ai un exercice où je dois pouvoir personnaliser certaines options d'un ordinateur portable. Je charge ces options à partir de la base de données. Il existe quatre options possibles: RAM, processeur, vidéo, écran. Pour le modèle d'entrée, je voudrais définir le ng-modelrespectivement.

<div class="text-center">
<div class="marginTop">

    <p>{{laptop.selected.text}}</p>

    <div class="row" ng-repeat="x in laptop.customize">
        <div class="col-xs-3">
            <p>{{x.name}}</p>
        </div>
        <div class="col-xs-9">
            <label class="radio-inline" ng-repeat="y in x.options">
                <input type="radio"  name="{{x.name}}" ng-model="laptop.selected.{{x.name}}" ng-value="y.description">            {{y.description}}
            </label>
        </div>
    </div>

    <div class="col-xs-12">
        <a href="#order" ng-click="laptop.save()" class="btn btn-default" type="submit">En door</a>
    </div>
</div>

Le but serait de définir ng-model="laptop.selected.RAM"ou ng-model="laptop.selected.Processor", mais je ne trouve aucun moyen de le faire.

Excusez mon html, je suis un noob.

[modifier] JSON dans un ordinateur portable. Personnaliser

[
{
"name": "RAM",
"options": [
  {
    "id": 1,
    "description": "4gb",
    "customizationlaptopid": 1,
    "pricedifference": -50
  },
  {
    "id": 2,
    "description": "6gb",
    "customizationlaptopid": 1,
    "pricedifference": 0
  },
  {
    "id": 3,
    "description": "8gb",
    "customizationlaptopid": 1,
    "pricedifference": 100
  }
]
},
{
"name": "Processor",
"options": [
  {
    "id": 4,
    "description": "i3 2.3Ghz",
    "customizationlaptopid": 2,
    "pricedifference": -100
  },
  {
    "id": 5,
    "description": "i5 2.7Ghz",
    "customizationlaptopid": 2,
    "pricedifference": 0
  },
  {
    "id": 6,
    "description": "i7 3.2GHz",
    "customizationlaptopid": 2,
    "pricedifference": 150
  }
]
},
{
"name": "Video",
"options": [
  {
    "id": 7,
    "description": "NVidia 720M 1GB",
    "customizationlaptopid": 3,
    "pricedifference": -100
  },
  {
    "id": 8,
    "description": "Nvidia 740N 2GB",
    "customizationlaptopid": 3,
    "pricedifference": 0
  },
  {
    "id": 9,
    "description": "Nvidia 980NX 6GB",
    "customizationlaptopid": 3,
    "pricedifference": 200
  }
]
}
]
Sajeetharan

Vous venez de définir comme ceci, puisque vous détenez déjà les valeurs en y, vous pouvez également obtenir la valeur sélectionnée en utilisant ng-change

<div class="marginTop">
    <p>{{laptop.selected.text}}</p>
    <div class="row" ng-repeat="x in laptop.customize">
        <div class="col-xs-3">
            <p>{{x.name}}</p>
        </div>
        <div class="col-xs-9">
            <label class="radio-inline" ng-repeat="y in x.options">
                <input type="radio"  name="{{x.name}}" ng-model="laptop.selected[y.name]" ng-change="getselected(y)"  ng-value="y.description">            {{y.description}}
            </label>
        </div>
    </div>
    <div class="col-xs-12">
        <a href="#order" ng-click="laptop.save()" class="btn btn-default" type="submit">En door</a>
    </div>
</div>

DEMO

Articles connexes


du modèle à l'intérieur de ng-repeat de ng-repeat-start

dr J'ai la structure suivante que le parent peut avoir plusieurs enfants et les enfants auront un objectif. Je dois montrer cela dans un tableau modifiable, mais lorsque je lie le modèle dans l'entrée d'objectif, il met également à jour l'objectif de tous les

Liaison du modèle ng dans la boucle ng-repeat dans AngularJS

cyberwombat: J'essaie de traiter le problème de la portée à l'intérieur d'une boucle ng-repeat - j'ai parcouru pas mal de questions mais je n'ai pas tout à fait réussi à faire fonctionner mon code. Code contrôleur: function Ctrl($scope) { $scope.lines = [{te