AngularJS radio button, ng-model does not update and ng-change does not work with ng-repeat

Question

AngularJS radio button, ng-model does not update and ng-change does not work with ng-repeat

Navigation

#1 by (1 votes)

2

I have an array with people's objects and the name and menu attributes for a dinner.

I want to paint them in the HTML with ng-repeat and each member will have a set of radio buttons so that, if they want to change the menu, I collect the information and update in the future in the BBDD what menu will take.

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);
    };
}]);

The ng-change is not running and the ng-model is not updated, other times it selects the radio buttons of all at the same time, every time it happens to me a different thing I think the ng-value may be the problem, but I'm already lost and I can not find a solution for the forum or the Internet.

AngularJS version: 1.6.3

Thanks to everyone who can and wants to help me.

Greetings.

javascript html5 angularjs

asked by ucip3 11.04.2017 в 12:55

source

1 answer

How do you load and run an [EXE] program in memory on Windows? Send a variable to the controller from AJAX in CodeIgniter [duplicated]

score 1 · Accepted Answer

Good, I attached a codepen with the result link

And the code has stayed like this: 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);
    };
}]);

If there is something that does not work or that does not solve what you are looking for, tell me about it and we will take a look at it.