Leverage the power of AngularJS by utilizing two ng-model directives

This is a code I have written:

<label><input ng-model="filter['category']['auto']" value="auto" type="checkbox" name="category">Auto</label>
<label><input ng-model="filter['category']['music']" value="music" type="checkbox" name="category">Music</label>

This code belongs to the controller section:

$scope.filter = {};

I use this filter to sort and display content, which works well. However, I now want to switch from using checkboxes to radio buttons for single category selection. I attempted the following code:

<label><input ng-model="filter['category'][type]" value="auto" type="radio" name="category" ng-change="type='auto'>Auto</label>
<label><input ng-model="filter['category'][type]" value="music" type="radio" name="category" ng-change="type='music'">Music</label>

Unfortunately, this new code doesn't seem to work as intended.

javascriptangularjsangularjs-filter

Answer №1

When using radio buttons, it is important to ensure that the ngModel attribute is the same for both inputs in order to avoid the need for ngChange.

<label><input ng-model="filter['category']" value="auto" type="radio" name="category">Auto</label>
<label><input ng-model="filter['category']" value="music" type="radio" name="category">Music</label>

By following this method, your filter object will appear as:

{ category: 'auto' }

or

 { category: 'music' }

If you use a different approach, such as having separate ngModel attributes for each input, you may encounter issues where your filter object looks like:

{ category: { auto: 'auto', music: 'music' }

This can potentially cause errors if the category is not meant to be an object.

Answer №2

For future reference, it would be helpful to provide more specific details about the errors you encountered instead of just stating 'it's not working'.

Additionally, please make sure to include a closing quotation mark in your auto label tag.

<label><input ng-model="filter['category']['type']" value="auto" type="radio" name="category" ng-change="type='auto'">Auto</label>

UPDATE: I have also included the missing 'type' string mentioned in another response.

Answer №3

<label><input ng-model="filter['category']" value="books" type="radio" name="category" ng-change="type='books'">Books</label>
<label><input ng-model="filter['category']" value="movies" type="radio" name="category" ng-change="type='movies'">Movies</label>

You can see it in action here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ajax memory leakage

Encountering a gradual memory leak issue in Internet Explorer and Firefox while utilizing a mix of ASP.NET AJAX and jQuery. The situation mirrors the one portrayed on this post: Preventing AJAX memory leaks, but with jQuery and ASP.NET AJAX instead of prot ...

javascriptjqueryajaxmemory-leaks

Exploring additional parameters within express.js

I'm currently working on creating an email sender that includes all necessary components such as 'from', 'to', 'subject', 'textBody', etc. However, I am facing a challenge in setting optional parameters in expre ...

javascriptnode.jsexpressemailnodemailer

Is there a way to dynamically reference an image within a webpage?

I am looking to access pic1 through pic2 ... picn with the object named image. Example code for the image object. for (var src in images) { image[src] = new Image(); image[src].onload = function () { counter++; }; image[src].src = ...

javascripthtml

Exploring the contrast in functionality between the Link and Anchor tag within the realm of React-router

Personally, I have noticed a trend of using the Link tag instead of the Anchor tag. It seems that the Link tag gets translated into an anchor tag in HTML. However, in my own observations, Link not only renders the page on the client side but also caches it ...

javascriptreactjsreact-router

Is it possible to set up a rotation percentage for a specific item?

As shown in the GIF below, when adjusting the window size, the image on the left grows and shrinks as intended. To achieve this effect, I placed a line inside the "image wrapper" that aligns with the text block on the right. Currently, the line is position ...

javascripthtmlcss

Hiding multiple images when only one image is present

I am facing an issue on a page where only one image needs to be displayed, but the image can come from different sources. I have included all possible image sources with an onerror function to hide the image if it fails to load from that source. However, ...

javascriptjqueryhtmlimageshow-hide

Aligning the second heading alongside pictures and a lightbox

My issue is that I am struggling to center the "See More" link directly under each title link. Currently, it is pushed to the right and I can't seem to find a solution. Any help with this problem would be greatly appreciated. I attempted using display ...

javascriptjqueryhtmlcsslightbox

Send the component to the Angular directive

I am currently working on a popup directive that is similar to the one found at https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js My goal is to position the popup close to the element that triggered its opening. What would be the mos ...

javascriptangularjs

Sharing videos on various social media platforms using AngularJS is a great way to reach a wider

As a first-time mobile app developer using angularjs, I am currently working on fetching data from a json file with the following code: <div ng-app="app" ng-controller="GetVideosFiles"> <ul ng-repeat=" x in GetData.videos "> <li>example ...

jsonangularjs

When using AngularJS, encountered an issue where a view was not updating with new data from a $http request

When making a request to the 500px API using $http for popular photos, the response object is successfully returned. However, I am facing difficulty in pushing the retrieved photo items to the view. Below is my current controller code: meanApp.controller ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

the navigate feature is not redirecting to the intended page as expected

I am currently working on a React application and facing an issue with configuring the navigation. The problem lies in the code of the Navbar component, where upon clicking the logout button, the authentication context should be cleared and the user should ...

javascriptreactjsreact-routerreact-router-dom

Tips on quickly validating a form using JavaScript

I've set up a form with 3 text inputs and a validation function that triggers on submit. Here's a snippet of the code: <form action="" method="post" onSubmit="return checkForm(this.form)"> and checkForm(): var pattern_name = /^([a-zA-Z ...

javascriptjqueryhtmlforms

The ng-repeat function is unable to fetch data from a JSON file

Within my AngularJS framework template, I have the following snippet of html code: <ul class="sb-parentlist"> <h1 class={{headerClass}}> Popular</h1><div data-ng-repeat="data in data track by $index"> <li> ...

htmlangularjsjsonangularjs-ng-repeat

Identifying page dimensions and implementing CSS adjustments when the width decreases to less than 500 pixels

I'm working on a website and I need to create a script that can detect when the page width is greater than 500px or less than 500px so I can adjust the layout accordingly. At the bottom of the page, there are some links arranged like a footer. When th ...

javascriptjqueryhtmlcsswidth

How jQuery can be leveraged to eliminate HTML elements within a dropdown menu

<script> $(document).ready(function() { $('.notification .tools .remove').on('click', function () { alert('hola'); $(this).parentsUntil('.notification').remove(); }) ...

javascriptphpjquerycsslaravel-5.1

Navigating with Angular and Node: Maximizing the Potential

Currently, I am delving into the world of Node and Angular. As a part of my learning journey, I am in the process of setting up a basic application with three pages. To guide me through this, I have been referring to the documentation provided at: enter li ...

javascriptnode.jsangularjs

What could be causing my directive to not display my scope?

I am currently developing a directive that includes a custom controller, and I am testing the scope functionality. However, I am facing an issue where the ng-show directive is not functioning as expected when trying to test if the directive has a scope fro ...

javascriptangularjsangularjs-directiveangularjs-scope

angularjs - the datepicker popup is displayed for both the start date and end date

Is there a way to prevent the datepicker popup from appearing when clicking on just one input field? Plunkr <form> <div class="form-group"> <label for="fromDate">From:</label> <input type="text" clas ...

angularjstwitter-bootstrapdatepicker

Creating multiple select drop-down listboxes in PHPWould you like to learn how to make

Seeking guidance on generating select drop-down lists in PHP. The code I have written only seems to work for the first drop-down, not the second... Here is the code snippet that has been causing me trouble: <?php while($row = my ...

javascriptphpjquerymysql

Access the JSON data stored in the File Directory by reading and utilizing it for your project

Can someone help me figure out how to retrieve data from the xmltojson.json file and assign it to a variable using JavaScript? const jsonfile = require('jsonfile') const file = 'xmltojson.json' jsonfile.readFile(file, function (err, obj ...

javascriptjsonfileparsing