Displaying content based on changing conditions fetched from the database

We are currently developing a dynamic form system where users can create custom questions in the admin panel and set conditions to display them based on the values of other questions.

ng-show="((UserCode==10003 && Name=='Ankur') ||(StateId=='NY'))"

This functionality works well for showing/hiding questions based on other question values. However, the conditions are dynamically created at runtime based on user-selected values in the database. How can we add dynamic ng-show conditions?

I attempted the following:

$scope.Condition = "((UserCode==10003 && Name=='Ankur') ||(StateId=='NY'))";

and ng-show="{{Condition}}", but this approach did not work.

UserId, Name, and StateId are examples of other questions on the page.

Please advise if any additional information is needed.

Thank you.

javascriptangularjsasp.net-mvc

Answer №1

Experiment with this approach:

ng-show="checkCondition()"
$scope.checkCondition =  function() {
    /* Insert your condition calculation here */
    var condition = ... ;
    return condition;
}

Answer №2

Do you understand that this is a string and not a condition that can be evaluated as true or false?

$scope.Condition = "((UserCode==10003 && Name=='Ankur') ||(StateId=='NY'))";

Here is the corrected version:

$scope.Condition = (UserCode==10003 && Name=='Ankur') ||(StateId=='NY');

Answer №3

$scope.Condition = "((UserCode==10003 && Name=='Ankur') ||(StateId=='NY'))";

This code will not work as intended because it does not return a true or false value.

Try using the following function instead:

$scope.condition = function(_usercode, _name, _state_id){
return (UserCode == _usercode && Name == _name) || (StateId == _state_id);
}

Then in your HTML code use 

ng-show="condition(10003,'Ankur','NY')"

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

Displaying multiple div elements when a button is clickedLet multiple divs be

ISSUE Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div... Image1 Image2 Desired Outco ...

javascriptjqueryhtmlcss

Troubles with creating promises in Node.js

Currently, I am facing a challenge in Nodejs where I need to execute asynchronous tasks. Specifically, I need to navigate through all levels of a JSON object sequentially but synchronously. I am experimenting with the following code snippet, which is a si ...

javascriptnode.jspromise

When a block reaches a certain height, the mat-chip-list in Angular Material is automatically shortened to fit. This feature is exclusive to

<div fxFlex="100" fxFlex.gt-sm="80" fxFlex.sm="100"> <div *ngFor="let permission of arrayOfObjectPermissions; let index = z" class="permissions-list"> <mat-card [title]=&qu ...

androidangularjsangularmobileangular-material

Choose the DIV element based on its data attribute using JSON

When using each(), my goal is to: Hide all divs where the data-infos.grpid = $jQuery(this).data('infos').grpid Show the next div where data-infos.ordre = $jQuery(this).data('infos').next_ordre I am unsure how to apply a "where" ...

javascriptjqueryjson

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Having an issue with my ion-select in Ionic version 6. I have successfully pre-selected a value when the page loads, but it doesn't show up in the UI until after clicking the select (as shown in pic 2). I'm loading the data in the ionViewWillEnt ...

javascriptangulartypescriptionic-frameworkionic6

If other options fail, Else If may not be a suitable choice

This is the process: switching from Issue: x==0||1 to x==0||x==1 etc. This code runs from an .html file <body> <div class="" id="pimg1"> </body><script> var x=new Date().getMonth(); if (x == 0||x == 5||x == 2){docu ...

javascripthtmlcsslogical-operators

Why is it difficult to display data fetched through getJSON?

The test-json.php script retrieves data from the database and converts it into JSON format. <?php $conn = new mysqli("localhost", "root", "xxxx", "guestbook"); $result=$conn->query("select * From lyb limit 2"); echo '['; $i=0; while($row ...

javascriptjsonajaxgetjson

Save the click value for future use

My appointment form is divided into separate panels. At Step 1, if a user clicks on London (#Store1), I want to hide the Sunday and Monday options from the calendar in panel 5. Essentially, I need to save this click event so that when the user reaches th ...

javascript

Issue with sending multiple files using FormData and axios in Vuex with Laravel. Server side consistently receiving null. Need help troubleshooting the problem

After trying the solution from my previous question Vuex + Laravel. Why axios sends any values but only not that one, which come's with method's parameter?, I realized that it only works when passing a single argument in axios. I managed to succe ...

javascriptlaravelvue.jsaxiosvuex

What is the best way to prevent the content within a div from being obscured by a sticky element affixed to the bottom of the div?

I am struggling with ensuring that the content in my wrapper does not get cut off by the "view more" div attached to the bottom. The default wrapper cuts off the children, and even when expanded, the issue persists due to CSS problems. In React, the gener ...

javascriptcssreactjsstyled-components

Tips for dynamically incorporating input forms within AngularJS

I am trying to dynamically change the form inputs using ng-bind-html. However, I am only able to display the label and not the text box on the DOM. The content inside ctrl.content will depend on the values received from the server. Important Note: The ...

javascripthtmlangularjshtml-sanitizing

Determine the variance between two strings using Jquery

Hello and thank you in advance for your help. I'm facing a basic query here - I have two variables: var x = 'abc'; var y = 'ac'; I am looking to compare the two variables and find the dissimilarity between them, which should be: ...

javascriptjquery

The Google Visualization chart fails to display properly once CSS is applied

Struggling with a graph display issue here. It's quite perplexing as it works fine on older laptops and Safari, but not on Chrome or older versions of Firefox. Works like a charm on my old laptop and Safari, but fails on Chrome and Firefox (haven&apo ...

javascriptcsscharts

Toggle to the following element in AngularJS

My issue is with managing a list of "cards" that have two parts, where only the first part is shown by default. <div ng-repeat="card in cards"> <div ng-click="displayEditView(card)">{{card.title}}</div> <div ng-show="card.dis ...

angularjssetinterval

React MUI: Dynamic and Adaptive sidebar

I'm currently working on integrating React Material UI: Persistent + Responsive drawer to create a responsive layout for mobile devices with a persistent drawer for larger screens. I've come across some code that almost fits my requirements, but ...

javascriptreactjsmaterial-designmaterial-ui

What is the best way to retrieve promiseValue from the response array?

I've run into some challenges while using Promise.all() for the first time with two get-methods. When I check the response in my console log, I can see the data I'm trying to fetch under promiseValue. However, I'm unsure of how to access it. ...

javascriptvue.jspromisegetfetch

Utilizing AngularJS to make an API call with $http method and handling a

I am attempting to make a call to my webservice using "$http". When I use "$ajax", it works fine. Here is an example of jQuery $Ajax working correctly: $.ajax({ type: "Get", crossDomain: true, contentType: "application/json; chars ...

javascriptjsonangularjsjquery-mobileangularjs-ng-repeat

Experience the power of VueJS 3 with Pinia, all without the need

I've hit a wall. Despite scouring documentation and countless google searches, I can't seem to find the answer to this straightforward query: how do I install/import PINIA in a VUE application? Let's consider a basic VUE app: <div id=&qu ...

javascriptvue.jspinia

Transforming the playbackRate property of a web audio-enabled audio element

I recently experimented with integrating an audio element into the web audio API using createMediaElementSource and achieved success. However, I encountered an issue when attempting to change the playback rate of the audio tag. Despite trying multiple appr ...

javascripthtmlhtml5-audioweb-audio-api

React - Highcharts Full Screen dark overlay

I am currently working on integrating highcharts/highstock into my application, and I have encountered an issue with the full screen functionality. The challenge I am facing is setting a fixed height for my charts while also enabling the option to view ea ...

javascriptcssreactjshighchartsreact-highcharts