AngularJS allows you to dynamically disable a button based on a value in an array

I have an array containing letters from A to Z and I want to create a list of buttons using them.

$scope.alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

I also have another array:

$scope.uniqChar = ['a', 'g', 'm'];

With this array, I want to create a button list where all buttons are disabled except for the ones with names 'a', 'g', 'm' (as in $scope.uniqChar).

I attempted this in jsfiddle, but the output appeared three times. I want it to show only once. Any insights on how to achieve this?

javascriptangularjsangularjs-ng-repeat

Answer №1

Make sure to check out the updated fiddle for more details. http://jsfiddle.net/U3pVM/13663/

Avoid using two ng-repeat directives to prevent duplicate rendering of buttons.

Below is the revised markup that addresses this issue:

<div ng-app>
    <div ng-controller="TodoCtrl">
        <button ng-repeat="letter in alphabet" ng-disabled="uniqChar.indexOf(letter) === -1">
            {{letter | uppercase}}
        </button
    </div>
</div>

Answer №2

Angular is following your instructions precisely. It displays the entire alphabet for each letter in the uniqChar array, only allowing the button with the current letter to be active.

Your desired functionality is to iterate through the alphabet and activate buttons that correspond to letters found in uniqChar array.

<button ng-repeat="letter in alphabet" ng-disabled="uniqChar.indexOf(letter) < 0">

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

Create automatic transcripts for videos, including subtitles and captions

Are there any tools or plugins available that can automatically create a transcript of a video for website playback? For example, generating captions and subtitles in the English language. ...

javascripthtmltranscription

Exploring the process of extracting/parsing HTML with Microdata

Hello, I am relatively new to the concept of Microdata. I currently have an HTML string that contains Microdata and I am interested in exploring the possibility of extracting the necessary information dynamically using Microdata with JavaScript or jQuery. ...

javascriptjqueryhtmlmicrodata

premature submission alert on button press

I'm encountering an issue where my form is being submitted prematurely when I click on the button. The desired behavior is for the button to create a textarea upon clicking, allowing me to write in it before submitting by clicking the button again. Ho ...

javascripthtmlbuttonevent-listener

What is the process for identifying children records of a parent (Adonis Lucid Many-to-Many) that match a specific criteria?

I am currently searching for the presence of specific Permissions within a single parent Role in a many-to-many relationship. const roles = await Role .query() .preload('permissions') this.role = roles.find(role => role.id === someid) co ...

javascriptnode.jsactiverecordadonis.jslucid

Is there a way for me to compare a string A1 with a value A2 located in index 0 within an array of values?

In my current task, I am attempting to compare two sets of strings: A1 must match A2 when selected. However, if A1 is chosen along with B1, C1, or D1, the comparison should return false. Similarly, selecting B1 should result in a match with only B2, while ...

javascriptarrays

Creating a simulated RESTful backend using Sinon.js for an Angular.js project

In the process of developing my Angular.js application, I am incorporating RESTful services that utilize the $resource service. While this app will eventually connect to a Java Spring application, I am currently focusing on creating an isolated mock server ...

javascriptjsonangularjsxmlhttprequestsinon

AngularJS single page applications experiencing issues with loading scripts and stylesheets upon page reload

Homepage Setup : <ng-view></ng-view> Angular Routing Configuration : when('/', { url: '/', templateUrl: 'site/home', controller: 'indexController' }). when(&apos ...

javascriptangularjsangularjs-routing

"Spin an image using Javascript when it is shown on the

I've got a script that shows an image when we are attacked by a monster. The image is initially set to display="none", but switches to display="" when a monster appears. What I'm looking to do is make the image rotate 360° when it changes from ...

javascriptcssimageeventsrotation

AngularJS - Directives cannot pass their class name into inner template

My goal is to create a directive that can apply a class name conditionally. However, I encountered an issue where the code only works if the class name is hardcoded into the class attribute. When I attempt to use it with any expression, it fails to work. ...

javascriptangularjsangularjs-directive

Altering Hues with a Click

One thing I wanted to achieve was changing the color of a hyperlink once it's clicked. I managed to make it work by using the code below: var current = "home"; function home() { current = "home"; update2(); } function comp() { current ...

javascriptcsshyperlinkonclickhover

Separate each item in the list and display them across multiple pages within a table

I'm looking to display a list of 37 items across four separate pages within a table. Can anyone suggest a way to split these items and showcase them in four different pages using either javascript or vue.js? ...

javascriptvue.js

How can I interpret a string with a specific format using JavaScript?

Input String: var json_data = "{0:'apple', 1:'bannana', 2:'guava'}"; Desired Output after parsing with JavaScript: var json_data = { columns: [{0:'apple'}, {1:'bannana'} ,{2:'guava'}] ...

javascriptjson

Is there a way to verify the presence of months in a column related to departments?

Is there a way to validate whether the current row aligns with the current column month and year? If not, can it be set to 0. Let's consider the current dataset. Presenting my resultData https://pastebin.com/GHY2azzF I want to verify if this data ...

javascriptreactjsnode.js

Combining Mongoose OR conditions with ObjectIDs

After querying my Team schema, I am receiving an array of ids which I have confirmed is correct. The issue seems to lie in the fact that both home_team and away_team are ObjectIDs for the Team Schema within my OR statement. Team.find({ 'conferenc ...

javascriptnode.jsexpressmongoose

Utilizing WebView for Initiating AJAX Calls

One common question often asked is whether it's possible to make ajax requests using a webview. In my case, the UI will consist entirely of native Android code, but I still need to interact with the backend using ajax calls. Fortunately, I am well-ver ...

javascriptandroidajaxwebviewuiwebview

Updating MySQL Status Using PHP and JavaScript

I have a list of tasks that users can add dynamically. Each task has a checkbox next to it, and when checked, the status of that task in the MySQL database should be updated. My initial approach was to include the following code: echo "<input type=&ap ...

phpjavascriptjquerymysql

Try using the slice method to cut a portion of a JSON object

I am trying to chop up a JSON array, but keep encountering the error message below: Object # has no method 'slice' This is my current code snippet: $scope.getPagedDataAsync = function (pageSize, page, searchText) { setTimeout(function ( ...

jsonangularjs

A guide on how to efficiently update and submit a reactive form with a single click of the submit button in Angular

Currently, I have a view component setup where clicking the edit button directs me to the register component for form updates using patchvalue. The issue that I am facing is that when I update and register the form using the same button, it creates anothe ...

javascriptangular

Implement Material-UI's built-in validation for form submission

I'm in the process of setting up a form with validation: import React from 'react'; import { useForm } from "react-hook-form"; import axios, {AxiosResponse} from "axios"; import {Box, Button, Container, Grid, Typography} ...

javascriptreactjstypescriptmaterial-ui

Adding a Stripe pay button using Jquery append results in the return of an [object HTMLScriptElement

I'm currently working on dynamically adding the Stripe pay with card button through jQuery. I've decided to append it because I only want it to show up once a specific condition is met by the user, as well as due to the fact that the pricing can ...

javascriptphpjquery