Using ng-repeat within an <input> element does not function as expected when nested

Question

Using ng-repeat within an <input> element does not function as expected when nested

Upon examination of my $scope parameter, I have come across the following structure:

$scope.filters = [{name: "Brands", brands: ['Brand1', 'Brand2', 'Brand3']}, 
                 {name: "Catalogs", brands: ['Cat1', 'Cat2', 'Cat3']}];

When attempting to display this data as a list in the HTML file, I utilized the following code snippet:

<div ng-repeat="filter in filters"><h3>{{filter.name}}</h3>
            <input type="checkbox" ng-repeat="brand in filter.brands"> {{brand}}<br>
        </div>

The filter.name displays correctly with values like "Brands" and "Catalogs", yet the checkboxes remain empty below them. The only workaround that works is removing the ng-repeat from the input tag and placing it outside using a label or similar element.
Is there something crucial that I am overlooking here?

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

just like that

var application = angular.module("application",[]);
application.controller("controller" , function($scope){
  $scope.filters = [{name: "Categories", categories: ['Category1', 'Category2', 'Category3']}, 
                 {name: "Items", categories: ['Item1', 'Item2', 'Item3']}];
  
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="application" ng-controller="controller">
<div ng-repeat="filter in filters"><h3>{{filter.name}}</h3>
     <div  ng-repeat="category in filter.categories">
        <input type="checkbox" ng-model="categories"> {{category}}<br>
     </div>
    </div>
  
  </div>

Answer 2

just like that

var application = angular.module("application",[]);
application.controller("controller" , function($scope){
  $scope.filters = [{name: "Categories", categories: ['Category1', 'Category2', 'Category3']}, 
                 {name: "Items", categories: ['Item1', 'Item2', 'Item3']}];
  
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="application" ng-controller="controller">
<div ng-repeat="filter in filters"><h3>{{filter.name}}</h3>
     <div  ng-repeat="category in filter.categories">
        <input type="checkbox" ng-model="categories"> {{category}}<br>
     </div>
    </div>
  
  </div>

Using ng-repeat within an <input> element does not function as expected when nested

Answer №1

Similar questions

Error: Improper hook call detected with no hooks being used (material-ui v5)

What are the implications of incorporating listeners in redux action creators?

Simple way to automatically update Ionic List

Employing a script that is generated from the jQuery AJAX response

This article will discuss how to send back an HTML response and include a cookie using Cloud

conceal the mustard-colored dots within the overlay

Is there a formatting error when pulling data from an API using Angular?

Accessing files outside of the root directory in a Meteor application

What is the method for expanding this schema array using mongoose?

Error: JQuery Ajax Success Handler cannot locate class method

Associate text with a color from a predetermined list (JavaScript)

Sort through a collection of objects using various criteria

Fuzziness occurrence in distinct vue element

Associating models using a many-to-many relationship in Sequelize unexpectedly restricts the ability to modify attributes in the join table

Tips for adding HTML table information to a database

Not successfully integrating an angular component

Storing data values from a specific object key into an array in Vue: Step-by-step guide

Tips for typing the following object/type in TypeScript

Obtaining the class names, dividing them, and then inserting the resulting array into a

Mastering the art of looping and implementing logic in JavaScript using Regular