Müssen wählen Sie eine Standard-Angular JS-Radio-Taste

Ich bin neu in Angular JS und ich bin versucht, erstellen Sie eine Reihe von radio-buttons. Erstellen der buttons war der einfache Teil, aber ich habe Probleme, herauszufinden, wie man Standard wählen Sie eine von Ihnen, ohne zu brechen alles. Ich habe gelesen, über die Verwendung ngChecked in den Winkel-docs und auf mehreren anderen stackoverflow-Fragen, aber noch kann nicht ganz scheinen, um es herauszufinden.

Was ich tun müssen, ist eine der Beschreibungen vorausgewählt, wenn der Benutzer kommt auf die Seite. Der Preis -, Rabatt -, und deal_value auch gezeigt werden müssen mit den Werten aus der vorgewählten price_option Objekt.

Hier ist der code, den ich versuche zu bekommen, um zu arbeiten: http://jsfiddle.net/qWzTb/311/

HTML-Code:

<body ng-app="demoApp">
    <div ng-controller="DemoController" ng-init="init([{qty: 1, price:10, qty_description:'descrip 1', discount:'1%', deal_value:200}, {qty: 2, price:7, qty_description:'descrip 2', discount:'5%', deal_value:100}])">  

       <div>
           <label ng-repeat="price_option in price_options">
              <input type="radio" ng-model="init.price_option" ng-value="price_option" ng-checked="selected_price_option" name="quantity"/>
              {{ price_option.qty_description }}
           </label>
           <ul>
              <li>{{ init.price_option.price }}</li>
              <li>{{ init.price_option.discount }}</li>
              <li>{{ init.price_option.deal_value }}</li>
           </ul>
        </div>
    </div>
</body>

Javascript:

angular.module('demoApp', []).controller('DemoController', function($scope) {

  $scope.init = function(prices) {
    $scope.price_options = prices;
    $scope.selected_price_option = $scope.price_options[0];
  };
});

InformationsquelleAutor rocket scientist | 2014-04-03

HTML

<body ng-app="demoApp">
    <!-- ng-init functionality belongs in controller -->
    <div ng-controller="DemoController">
        <!-- move ng-repeat to container div instead of label -->
        <div ng-repeat="price_option in price_options">
            <label>
                <!-- the model is the scope variable holding the selected value -->
                <!-- the value is the value of this particular option -->
                <input type="radio" ng-model="$parent.selected_price_option" ng-value="price_option" name="quantity" />{{price_option.qty_description}}</label>
            <ul>
                <li ng-bind="price_option.price"></li>
                <li ng-bind="price_option.discount"></li>
                <li ng-bind="price_option.deal_value"></li>
            </ul>
        </div>
    </div>
</body>

angular.module('demoApp', []).
controller('DemoController', function ($scope) {
    //moved init logic to controler
    $scope.price_options = [{
        qty: 1,
        price: 10,
        qty_description: 'descrip 1',
        discount: '1%',
        deal_value: 200
    }, {
        qty: 2,
        price: 7,
        qty_description: 'descrip 2',
        discount: '5%',
        deal_value: 100
    }];
    $scope.selected_price_option = $scope.price_options[1];
});

Gabel Geige: http://jsfiddle.net/W8KH7/2/

Oder verwenden Sie den Objekt-Strategie, zu vermeiden, dass die Referenz $parent: http://jsfiddle.net/W8KH7/3/

Danke für die schnelle Antwort! Ich werde versuchen, diese Arbeit mit Hilfe der Initialisierer-Funktion, kann aber nicht herausfinden, das scoping, die mit init(). Ich brauche die Initialisierung bc ich bin die Weitergabe von Informationen über ruby von der Ansicht, um das price_options.
Sie können nur code ausführen, der dann im ng-init wie würden Sie in der controller-excpet Sie weglassen $scope.

ng-init="price_options=[{qty: 1,price: 10,qty_description: 'descrip 1',discount: '1%',deal_value: 200}, {qty: 2,price: 7,qty_description: 'descrip 2',discount: '5%',deal_value: 100}];selected_price_option = price_options[1]"

.
Diese Version zeigt die gleichen Funktionen wie revision 3 verwendet, außer ng-init: jsfiddle.net/W8KH7/4
Puh, endlich es funktioniert! Vielen Dank für alle Hilfe!

InformationsquelleAutor km6zla

3

Allgemeinen Vorschlag, vermeiden Sie die Verwendung von '{{}}' verwenden, ng-bind (Diese wird nicht im Zusammenhang in Frage zu stellen, nur seine gute Praxis )

Verwenden
```
ng-value="true"
```
Wenn Sie Steuern möchten, aus controller.js dann nutzen Sie
```
ng-checked="default_option"
```
und Steuern controller.js
```
$scope.default_option = true
```
Danke für den Tipp! Ich aktualisierte mein code ng-bind anstelle von" {{}}'

InformationsquelleAutor onsy

Versuchen Sie diesen Ansatz:

angular.module('demoApp', []).controller('DemoController', function ($scope) {
    $scope.priceOptions = [
        {qty: 1, price: 10, qty_description: 'Descrip 1', discount: '1%', deal_value: 200}, 
        {qty: 2, price: 7, qty_description: 'Descrip 2', discount: '5%', deal_value: 100}
    ];
    $scope.selected = {priceOption: $scope.priceOptions[0]};
});

HTML

<label ng-repeat="priceOption in priceOptions">
    <input type="radio" ng-model="selected.priceOption" ng-value="priceOption" name="quantity" />
    {{ priceOption.qty_description }}
</label>
<ul>
    <li>{{ selected.priceOption.price }}</li>
    <li>{{ selected.priceOption.discount }}</li>
    <li>{{ selected.priceOption.deal_value }}</li>
</ul>

Demo: http://jsfiddle.net/qWzTb/313/

InformationsquelleAutor dfsq

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.