Difficulty getting ng-checked to function properly with multiple condition expressions in AngularJS template

In order to implement the functionality where selecting a category automatically checks the corresponding User checkbox, there is an issue with previously checked checkboxes not being unchecked when the Category key is not present in the usr_cat array. Additionally, it is required to uncheck all users when the Manager category is selected.

Category = [{cid:'1',name:'Head'},cid:'2',name:'Manager'}]

users = [0:{'id':10,name:'AAAAA'},{'id':12,name:'BBBBB'},{'id':13,name:'CCCCC'},{'id':14,name:'DDDDDDDD'}]

usr_cat = ['1':[10,14]]

List of Categories

    <ul class="list-unstyled cat-lst">
      <li ng-repeat = "cat in categery" ng-click ="selectcategry(cat.cid)>{{cat.name}} </li>
    <ul>

List of Users

<ul class="list-unstyled usr-lst">
  <li ng-repeat = "usr in users">
    <span class=" checkbox ">
     <input class="optionChechk " id="user_{{usr.id}}" type="checkbox" ng-checked = "{{usr_cat[sele_cid] != 'null' && usr_cat[sele_cid] != 'undefined' && usr_cat[sele_cid] != '' && (usr_cat[sele_cid].indexOf(usr.id) != -1)}}" ng-value="{{usr.id}}" >
     <label for="user_{{usr.id}}" txt = "{{usr_cat[sele_cid]}}">{{usr.name}}</label>
    </span>
  <li>
</ul>

Javascript Function

$scope.selectcategry = function(cid){
    $sele_cid = cid;
}

Answer №1

Hey there! The code is full of errors:

  1. Avoid using angular braces inside ng-attributes.
  2. Make sure to properly close all quotes.
  3. Follow proper naming conventions like camel casing.
  4. It seems like you have misspelled "category" as "categery" throughout the code.

    <ul class="">
       <li ng-repeat = "cat in category"
           ng-click ="selectcategory(cat.cid)">{{cat.name}}</li>
    </ul>
    
  5. The array responses appear to be invalid, check below for suggestions - it seems like "scope" is missing in "sele_cid".

    $scope.category =[{"cid":'1',"name":'Head'},{"cid":'2',"name":'Manager'}];
    $scope.users = [{'id':10,"name":'AAAAA'},{'id':12,"name":'BBBBB'},  {'id':13,"name":'CCCCC'},{'id':14,"name":'DDDDDDDD'}];
    
    $scope.usr_cat = [10,14];
    $scope.selectcategory = function(cid){
    
        $scope.sele_cid = cid;
    }
    

    Please address these issues promptly.

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

Tracking the number of form submissions on a PHP website

I am looking to add a counter feature to my website where every time a form is submitted, the count increases for all visitors. The starting number will be 0 and each form submission will increment the count. While I can manage the count using JS/jQuery w ...

Is there a way to retrieve a comprehensive list of every single import within a ts file, including their exact absolute paths?

What I am seeking: Let's say we have a file called a.tsx import X from './x.js'; import { Y, Z } from 'src/path/to/file.ts'; I want to create a list that looks like this: X - someRootLocation/path/to/x.js Y - someRootLocation/pa ...

Can you explain the steps for creating a directive in Angular that wraps an input and displays an error message if the input is invalid?

As a complete novice in Angular, I might have the wrong approach to it. My goal is to develop a directive that encompasses an input within some standard HTML. It should connect the ng-model of the input to the parent scope (the controller's myForm sc ...

Efficient PHP caching solution for optimizing JavaScript and CSS performance

I'm facing a unique challenge that I can't seem to solve through typical Google searches. I'm in the process of consolidating all my javascript and css into separate php files using require_once() to pull in the content. The structure of my ...

Tips for aligning meshes to the left and ensuring responsiveness in three.js

Currently working on a website using three.js, I'm facing an issue where I can't seem to align and make the mesh responsive simultaneously. My current approach to alignment is: cube.position.x = -20 However, when I try resizing the window, the m ...

Utilizing Vue.js with Electron: Establishing seamless data synchronization between backend and frontend

I am currently developing a Vue-Electron application. Picture a settings page on the frontend where users can adjust various variables. It is crucial for me to ensure that all settings are saved even when the settings page is reloaded. To achieve this, I r ...

Ensure Safari sends the Origin header in jQuery GET requests

When I send a request from https://app.example.com, the following code is executed: $.get('https://api.example.com', { foo: 'bar' }) .success(getSuccess) .error(getError); This script runs smoothly on Chrome and Firefox, however, ...

Retrieve the value of a cell from a constantly changing HTML table based on the information found in the top row

My HTML table has columns that may change order. Below is the code for the table: <table id="table"> <tr> <td>ID</td> <td>Place</td> <td>Population</td> & ...

What is the best way to resize an SVG to perfectly fit the parent div container?

I need to display multiple SVGs from various sources, each with different height, width, and viewbox. I want them all to render within a fixed height and width div, filling up the available space. How can I scale these SVGs to fit the container div? For i ...

Load the template.html file using pure JavaScript without relying on jQuery

At the moment, I am implementing a template load process in the following way: $('#mydiv').load("template1.html") While I am currently relying on jQuery for this functionality, I am curious to know how I can achieve the same outcome using pure ...

Changing the Size of React Bootstrap Cards to Fit Your Grid Layout with Custom CSS

I am facing an issue with the varying sizes of react-bootstrap cards within a grid display. Check out the problem I am encountering: https://i.sstatic.net/szHjI.png I need the size of Over Under 0.5 card to be different from the one for Match Winner, as ...

The Ajax script is malfunctioning

Currently, I have a program that requires the user to input a city and country. The program then checks the database to see if the city already exists - displaying a warning message using ajax if it does, or adding the city to the database if it doesn&apos ...

utilize jquery ajax to input various data

I am attempting to include multiple data in a jQuery ajax call. However, my current implementation is not working as expected. The data fetched is taken from the following span: <span id="<?php echo $tutorial_id; ?>" modes="<?php echo $modese ...

Interacting across numerous tiers of nested directives

Allow me to explain the situation, it may seem a bit intricate. I have structured my directives in three layers: At the top layer, there is a popup directive In the middle layer, there is a switch-pane directive * The bottom layer consists of various vie ...

Understanding the Functioning of a Digital Analog Clock Using JavaScript

As a new learner, I found the operation of a Digital analog clock to be quite puzzling. I was presented with an image called clock.png, and I specifically struggled with how the hands of the clock function. Javascript - const deg = 6; // defining the valu ...

Menu icon in Next.js/React/Tailwind not triggering close action when clicked again, causing responsiveness issue

Hey there, I'm relatively new to working with Next.js and React. Right now, I'm tackling the challenge of creating a responsive navbar that toggles open and closed when clicking on the hamburger icon (and should also close when clicked outside th ...

Passing JSON data with special characters like the @ symbol to props in React can be achieved

Using axios in React, I am fetching JSON data from a database. I have successfully retrieved the JSON data and stored it in state to pass as props to child components within my application. However, the issue arises when some of the objects in the JSON s ...

Wookmark js isn't designed to generate columns from scratch

I am attempting to utilize the Wookmark jQuery plugin in order to create a layout similar to Pinterest. However, I am encountering an issue where Wookmark is not creating columns within the li elements, instead it is simply stacking images on top of each o ...

Are there any AngularJS plugins available that prompt users to re-enter their login credentials when their session expires?

I am in search of an AngularJS plugin that, when a user's session expires, redirects them to the login page and allows them to log back in and return to the same page they were on. I am currently using Spring Security for login. Can anyone assist me w ...

What is causing my Mongo database to be unresponsive during my initial request?

In the context of my NodeJS and Mongoose setup, I have two models in my MongoDB: User and Product. My goal is to update a user in both of these models (where a user can have many products and a product has one owner, the user). However, when I make the u ...