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

In search of a React.js/Redux OpenID library or example, particularly focused on Steam OpenID integration

Currently, I am developing a Node/Express REST + React/Redux application that requires Steam OpenID for authentication. Despite searching extensively for tutorials, libraries, or example code related to Steam OpenID (or any other OpenID), I have come up em ...

javascriptreact-reduxopenidsteam

Incorporating the Revolution Slider jQuery plugin within a Vue.js environment

Currently, my goal is to transform an html project into a vue application. The initial project utilizes a jquery plugin for Revolution slider by including them through script tags in the body of the html file and then initializing them: <script type= ...

javascriptnode.jsvue.jsnpmrevolution-slider

Accessing JSON data from a URL for use within a specific context

I am currently utilizing the request module within Express to fetch a JSON file from a specified link. var url = 'https://api.github.com/users/google/repos'; request.get({ url: url, json: true, headers: {'User-Agent': &apo ...

javascriptnode.jsexpress

Creating a Dropdown list using Javascript

I am currently working on implementing inline CRUD operations in MVC 5. When a user clicks a specific button to add new records, it should create a dynamic table row. Below is the JavaScript code I am using: function tblnewrow() { var newrow = ' ...

javascriptc#asp.net-mvc

Tips for personalizing Twitter Bootstrap popover concealment animation

Currently, I am interested in creating a unique hide animation for my popover. Instead of directly modifying bootstrap.js, I would like to implement my own custom code. $.fn.popover = function (option) { return this.each(function () { ...

javascriptjquerytwitter-bootstrap

Creating a progress bar for file uploads without using jQuery

We're currently seeking a way to implement a file upload progress bar feature without relying on ajax or jQuery. Unfortunately, we haven't come across any helpful tutorials through our Google searches. Below is the basic code snippet we have so ...

javascriptphpjqueryajax

Retrieving the checkbox's status from the database

I have implemented a basic checkbox that updates its state in the database when clicked or unclicked. Is there a way to retain this state and have it displayed as checked if the page is refreshed? Essentially, I want the checkbox to remember its last state ...

javascriptphpjqueryajaxmysqli

spill the elements from one div into another div

I'm facing a situation where I have 2 divs on a page, with the first div containing text content only. The issue is that when the content of the first div overflows, it gets cut off due to the CSS applied to it: .one { overflow: hidden; width: 1 ...

javascriptjqueryhtmlcss

Guide on importing images from directories in Vue

As I delve into learning vue.js, a particular issue has surfaced. I am in the process of creating an SFC and encountering difficulties with loading images from the 'src / assets / logo.png' folder. Below is the code snippet: <template> & ...

javascriptvue.jswebpackvuejs2vue-cli

Establishing a connection between a Google spreadsheet to create and automatically update calendar events

I'm currently working on connecting my Google Sheet to a calendar so that it can automatically generate calendar events and keep them updated based on changes made in the sheet. The Google Sheet I'm using tracks new building opening dates and con ...

javascriptgoogle-apps-scriptgoogle-sheetsgoogle-calendar-api

Develop a unique method for loading AngularJS templates

When working with AngularJS, there are various ways to provide an external template, such as using a script tag or a separate HTML file on the web server. However, I am faced with a situation where I need to implement a custom logic for retrieving these ...

javascriptangularjstemplatesangular-templatecache

Managing iframes in React using reference methods

Trying to set the content of an iframe within a React component can be a bit tricky. There is a component that contains a handleStatementPrint function which needs to be called when the iframe finishes loading. The goal is to print the loaded iframe conten ...

javascripthtmlreactjsiframeref

A guide on switching out an HTML element with an AJAX response

How can I dynamically replace an HTML element with Ajax response? I know how to remove the element, but I'm unsure how to then insert the new content from the Ajax call. For instance, let's say I have the following code: <ul id="products"> ...

javascriptphpjqueryhtmlajax

Getting JSON or JSONP data through a XAMPP local server is a straightforward process

After setting up a local server with XAMPP, my goal is to retrieve JSON / JSONP data from that server. Additional query: Do I need to upload the JSON file directly onto the server? Or can I achieve this using somePHPcoding? If so, which? I have come ac ...

javascriptphpajaxjsonxampp

Ensure the function has completed setting state before proceeding to the next function

async componentDidMount() { this.loadSelectors(); this.useSelectors(); }; loadSelectors = () => { this.setState({"Selector": "Test"}); } useSelectors = () => { console.log(this.state.Selector); } Is there a way to ensure that loadS ...

javascriptreactjs

Transferring information from JSON to HTML

Recently, I came across this handy design tool within our service that helps generate Gauge charts by simply adding a specific div class to the desired pages. <div class="gauge" id="g0" data-settings=' { "value": ...

javascripthtmljson

Utilizing $http (REST) to send information from a form

Struggling to leverage Angular for CRUD processes, especially encountering difficulties with POST requests to the server. This is my controller: angular.module('myModule').controller("ListingCtrl", function($scope, posts) { $scope.addProje ...

javascriptangularjsrestcrudangular-services

What is the best way to prompt Leaflet to refresh the map display?

I'm facing a challenge while integrating Leaflet with React, where Leaflet seems to want control over the DOM rendering as well based on my research. Currently, I have countries being properly colored according to specific color codes derived from ba ...

javascriptreactjsleaflet

What are the steps to integrate and utilize DefinePlugin within your webpack configuration?

Hello, I'm currently trying to implement the DefinePlugin in order to update the version number and ensure that my JavaScript refreshes after a new build is released. Unfortunately, I am encountering issues with getting DefinePlugin to work properly. ...

javascriptnpmwebpack

Where should uploaded files be stored using ng-flow?

Initially, I am utilizing the ng-flow, which is an html5 file upload extension built on the angular.js framework. After uploading my files and logging the event in the console, I'm uncertain about where and how to store them. Below is my HTML code w ...

javascriptphpangularjsflow-js