2

tengo un array con objetos de personas y los atributos name y menu para una cena.

Quiero pintarlos en el HTML con ng-repeat y cada miembro tendrá un set de radio buttons para que, si quieren cambiar el menú, yo recoja la información y actualice en un futuro en la BBDD qué menú va a tomar.

HTML:

<main ng-app="easterMenu" ng-controller="memberCtrl">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <div class="membership" ng-repeat="member in fellowship">
                    <h3 class="membership__name">{{ member.name }}</h3>

                    <input id="cordero-{{$index}}"
                        type="radio"
                        name="menu-{{$index}}"
                        ng-value="cordero"
                        ng-model="$parent.menuSelected"
                        ng-checked="{{member.menu == 'cordero'}}"
                        ng-change="selectMenu($index)">
                    <label for="cordero-{{$index}}">Cordero</label>

                    <input id="infantil-{{$index}}"
                        type="radio"
                        name="menu-{{$index}}"
                        ng-value="infantil"
                        ng-model="$parent.menuSelected"
                        ng-checked="{{member.menu == 'infantil'}}"
                        ng-change="selectMenu($index)">
                    <label for="infantil-{{$index}}">Infantil</label>
                </div>
            </div>

            <p>{{ menuSelected }}</p>
        </div>
    </div>
</main>

JS:

var app = angular.module('easterMenu', []);

app.controller('memberCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.fellowship = [
        {
            name: "Pepe",
            menu: "cordero"
        },
        {
            name: "María",
            menu: "infantil"
        },
        {
            name: "Juan",
            menu: "cordero"
        }
    ];

    $scope.selectMenu = function(index) {
        console.log(index);
        console.log($scope.menuSelected);
    };
}]);

El ng-change no se está ejecutando y el ng-model no se actualiza, otras veces selecciona los radio buttons de todos al mismo tiempo, cada vez me pasa una cosa diferente. Creo que el ng-value puede ser el problema, pero es que ya estoy perdido y no encuentro solución por el foro o Internet.

Versión AngularJS: 1.6.3

Gracias a todo aquel que pueda y me quiera ayudar.

Saludos.

1 respuesta 1

1

Buenas, te adjunto un codepen con el resultado https://codepen.io/anon/pen/PmYpGX?editors=1011

Y el código ha quedado así: HTML:

<main ng-app="easterMenu" ng-controller="memberCtrl">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <div class="membership" ng-repeat="member in fellowship track by $index">
                    <h3 class="membership__name">{{ member.name }} </h3>

                    <input
                        type="radio"
                        name="menu-{{$index}}"
                        ng-model="member.menu"
                        ng-checked="{{member.menu === 'cordero'}}"
                        ng-change="selectMenu(member)"
                        value="cordero"
                        >
                    <label for="cordero-{{$index}}">Cordero</label>

                    <input id="infantil-{{$index}}"
                        type="radio"
                        name="menu-{{$index}}"
                        ng-model="member.menu"
                        ng-checked="{{member.menu == 'infantil'}}"
                        ng-change="selectMenu(member)"
                        value="infantil"
                        >
                    <label for="infantil-{{$index}}">Infantil</label>
                </div>
            </div>

            <p>{{ menuSelected }}</p>
        </div>
    </div>
</main>

JS:

var app = angular.module('easterMenu', []);

app.controller('memberCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.fellowship = [
        {
            name: "Pepe",
            menu: "cordero"
        },
        {
            name: "María",
            menu: "infantil"
        },
        {
            name: "Juan",
            menu: "cordero"
        }
    ];
    $scope.selectMenu = function(member) {
        console.log(member.name + " " + member.menu);
    };
}]);

Si hay algo que no funciona o que no soluciona lo que buscas comentamelo y le echamos un ojo.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.