Issue found while attempting to show checkbox input in a table

I currently have a table that displays checkbox elements when clicked by the user. However, after clicking the checkbox, nothing is being displayed.

<td ng-switch="user.scope">
   <span class="label label-primary" ng-switch-when="1">Admin</span>
   <span class="label label-primary" ng-switch-when="2">App</span>
   <span class="label label-primary" ng-switch-when="3">Redemption</span>
</td>

Below is the code for the checkbox element in my modal form:

<label for="scope">Scope</label><br>
  <input type="checkbox" ng-model="user.scope.admin" name="scope[]" value="1"> Admin <br>
  <input type="checkbox" ng-model="user.scope.app" name="scope[]" value="2"> App <br>
  <input type="checkbox" ng-model="user.scope.redemption" name="scope[]" value="3"> Redemption <br>

In addition, here is the javascript portion of the code:

$scope.users = [{username: "a", name:"b", password:"c", confirmpassword:"d", status:"0", scope:"1" }];

    $scope.addUser = function(user) {
        $dialog.open({
            showClose: false,
            closeByEscape: true,
            template: 'views/user/user-user-add.html',
            controller: ['$scope', function ($dialogScope) {
                $dialogScope.isLoading =false;
                $dialogScope.title = "New User";
                $dialogScope.user = {
                    username : "" ,
                    name : "",
                    password :"",
                    confirmpassword :"",
                    status : "",
                    scope : {},
                };

 $dialogScope.add = function() {
                    console.log($dialogScope.user);
                    $scope.users.push($dialogScope.user);
                    $dialogScope.closeThisDialog();
                }

Answer №1

When dealing with multiple selection, the use of ng-switch is not recommended since it only focuses on the value of one expression. Instead, it is advisable to check each expression individually, such as user.scope.admin, and utilize ng-show accordingly.

Here's an example:

<td>
   <span class="label label-primary" ng-show="user.scope.admin">Admin</span>
   <span class="label label-primary" ng-show="user.scope.app">App</span>
   <span class="label label-primary" ng-show="user.scope.redemption">Redemption</span>
</td>

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

My goal is to adjust the height of every text box on the page

Seeking guidance here. Within the webpage I'm developing, there are multiple 'Divs' containing 'text boxes' and 'background images' within them. I aim to adjust the height of each text box on the page. The height of each ...

After executing "npm run dev" in Svelte and Vite, a common error message of "HTMLElement is not defined" might appear

Incorporating several web components into my Svelte project led to the appearance of an error message stating HTMLElement is not defined after running npm run dev (which actually translates to vite dev). The complete error message reads as follows: HTMLEl ...

ngTable select all data that has been filtered

I have encountered an issue with selecting only the rows from an ng-table that have been filtered. The current code filters the table rows successfully, but it also selects rows that are not displayed: Controller: let sampleData = [{id: 1, name: 'Jo ...

Can you explain how to convert a 32-bit floating point number from a Buffer to a JSON string in NodeJS while maintaining the original precision?

Given a buffer with single precision float numbers (32 bits, little endian), the goal is to create a JSON string holding those numbers while maintaining their original values without any loss of precision. The challenge lies in the fact that when a value ...

Unexpected behavior occurs in ReactNative when the keyboard pushes the content away, causing issues with KeyBoardAvoidingView

Currently, I am working on integrating a small input form in react-native. However, I have encountered an issue where when I open the keyboard, it disrupts the layout and content of the form. I attempted using KeyBoardAvoidingView and ScrollView in vario ...

How to transmit data using ajax through a hyperlink? (Without relying on ExtJS, jQuery, or any other similar libraries)

I have a link that says "follow me" and I want to send some basic data to the page without having it reload. Update: I just realized that using "onclick" will help me achieve what I need. Got it. Update 2: I mean, something like this: follow me ...

Step-by-step guide on writing to a JSON file using Node.js

I am currently developing a Facial Recognition web application using React for the frontend and Node.js for the backend. You can find more information about my project here. So far, I have completed the frontend part where users manually add 128-d descript ...

A Guide to Retrieving the First Child Element's Text with Jquery and a Class Selector

I want to extract the text from the first child small element inside a dynamically generated div. The structure looks like this: <div class="NDateCount" style="display:inline-block"> <!--Issue to solve--> <small ...

Disable HoverZoom feature for images on the website

Currently building a website that includes various images. I have Imagus (similar to HoverZoom) installed for automatic image enlargement on hover, but I do not want this function for my specific images. I've noticed it works for some images and not ...

Utilizing v-for to display dynamic data in a modal imported through slots

Issue: I'm facing an issue with passing data from a clicked card to a modal component. The modal should display the title, image, preview URL, and download URL of the card that was clicked. However, I'm encountering an error that says is not def ...

bootstrap modal dialog displayed on the edge of the webpage

I am facing an issue with a modal dialog that pops up when clicking on a thumbnail. The JavaScript code I used, which was sourced online, integrates a basic Bootstrap grid layout. The problem arises when half of the popup extends beyond the edge of the pa ...

SignalR HubConnection in React fails to transmit data to server

Hey there, I'm currently working on an application that is supposed to connect to a SignalR hub and send data when certain buttons are clicked. However, I've encountered an issue where nothing seems to be getting sent. const bannerId = 1; con ...

Skipping pagination in Angular smart-tables implementation

EDIT FIXED: There's a peculiar note on utilizing this module for loading data via ajax and ensuring that sort, filter, and pagination work smoothly. The process is slightly more intricate compared to the majority of examples available online that use ...

Controller function failing to trigger

I'm new to asking questions, so if I've made a mistake, please let me know. I've searched for an answer here but couldn't find one. Any help would be greatly appreciated. I'm attempting to load a list of "Countries" using a contro ...

A step-by-step guide on integrating AngularJS login with Spring Security

My goal is to implement a login functionality using AngularJS to send the username and password to Spring Security, instead of relying on the traditional login.jsp method. Below is an outline of my configuration: -security_config.xml <http use-express ...

Transforming an Input Field into a String with React's onChange Event

I have a small application consisting of three components Parent Component: App Son Component: Courses Grandchild Component: Course The state of the app is stored in the App component. In the Course component, there is an input field with an onChange ev ...

Choosing Between ng-app And data-ng-app Directives in AngularJS

When using AngularJS, the ng-app directive found in the document is used to define the root element for auto-bootstrapping as an application. In some applications, it is instead used as data-ng-app. Is there a difference between these two declarations? I ...

Simple method for securing and unsecuring uploaded files in a directory with the use of AngularJS and a PHP framework

I've been exploring options for encrypting and decrypting files, specifically .pdf files. After researching and experimenting with codes like crypto.js, I'm still struggling to grasp the process. Can someone provide guidance on how to achieve thi ...

Tips for successfully executing queries with Axios within a Vue application

Is there a way to send query parameters using Axios so that I can access them in my backend code using req.query.email? The following approach doesn't seem to be working as expected: this.$http.post(this.$BASE_URL + 'agents/auth/create-password&a ...

Utilize Angular to send a request to a DJANGO REST API, retrieve the data, and display the results in a DJANGO view

I'm currently facing an issue where I have a search input field on my main index page. When the user inputs a query, it gets sent to the Django REST API which responds with data in JSON format. Using Angular's ng-repeat, I can iterate through the ...