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

A step-by-step guide to implementing lodash once in Vuejs

I am faced with the following input scenario. <input type="text" maxlength="50" v-on:input="query = $event.target.value" v-on:keyup.enter="once(search)" /> Additionally, there are ...

javascriptvue.jslodash

Unable to successfully link filter outcomes with input in AngularJS

Here is the code snippet I am working with: <body ng-app=""> <div ng-init="friends = [{name:'John', phone:'555-1276'}, {name:'Mary', phone:'800-BIG-MARY'}, {nam ...

javascriptangularjs

Adjust the canvas size to fit its parent element ion-grid

I am currently working on an Ionic 3 component that displays a grid of images connected by a canvas overlay. I have utilized Ionic's ion-grid, but I am facing an issue with resizing the canvas. The problem is that I cannot determine the correct dimens ...

javascripthtmlcanvasflexboxionic3

`Considering various factors to alter class pairings`

I have defined a few style classes in my stylesheet as shown below: .left-align{ /* some styles here */ } .right-align{ /* some styles here */ } .validate-error{ /* some styles here */ } Depending on the type of data, I need to align the content ei ...

htmlcssangularjsvalidationng-class

Utilizing Multiple Checkboxes for Precision Search Refinement

Big thanks to Khalid Ali for the support provided up until now. I am currently working with an array of songs that each have descriptions, keywords, etc. I have a set of checkboxes that I want to use to refine a search. Essentially, if someone selects the ...

javascripthtmlvue.jssearchfiltering

Angular appears to be having trouble with localStorage functionality

Having an issue with my service that interacts with a local NOTES object array using localStorage. Whenever the page refreshes, the previously entered data is lost and only the initial data in the const NOTES array remains. Can't seem to figure out wh ...

javascriptangularlocal-storageangular2-services

Tips for identifying and handling a 400 bad request error in an HTTP response within an Angular 2 application

I attempted to handle the error 400 bad request in this manner: catch((error: any) => { if (error.status === 500) { return Observable.throw(new Error(error.status)); } else if (error.status === 400) { console.log( 'err ...

javascriptangularhttp-status-code-400

What is the best way to pass a variable between different routing functions?

I am currently developing a server-side parser for an API. Each GET request made to my website must first initiate a request to the API, and since this request is always the same, I would like to encapsulate it within its own function. What is the best wa ...

javascriptnode.jsexpress

Using Node.js Express to pass data from both the URL and session into a JavaScript file being served

I've been working on a web-socket application where the client connects to a game instance and the server then links the client to the corresponding Socket.io room for transmitting information. For example, connecting to '/game/abc' would lo ...

javascriptajaxnode.jsexpresssocket.io

Encountering a 500 error in Angular while utilizing forkJoin for calling API services

In my Angular 7 project, I have implemented a call in the ngOnInit method to two different API routes to fetch some data using forkJoin. Here is how I have set it up: ngOnInit() { debugger this.route.params.pipe( switchMap(params => for ...

javascriptangularapipipefork-join

The peculiar characteristics of the dragLeave event in various web browsers

I observed a peculiar behavior while working with drag events in Internet Explorer 11. It seems that adding a 'width' property to the elements triggers the dragLeave event, whereas without it, the event does not fire. Can anyone shed light on why ...

javascriptcssinternet-explorer-11draggable

Connecting the mat-progress bar to a specific project ID in a mat-table

In my Job Execution screen, there is a list of Jobs along with their status displayed. I am looking to implement an Indeterminate mat-progress bar that will be visible when a Job is executing, and it should disappear once the job status changes to stop or ...

javascriptangulartypescriptangular7

Automatically scrolling through a nested list in ReactJs

I have a chat list integrated into my web application. The entire webpage is scrollable, as shown in the image at the bottom. I would like the messages list to automatically scroll to the bottom whenever a new message arrives. To achieve this, I created a ...

javascriptnode.jsreactjs

BS4 Dynamic Countdown Clock

I have successfully integrated a countdown timer into my website, utilizing the following HTML code: <div id="clockdiv"> <div> <span class="days"></span> <div class="smalltext">Days</ ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Assistance with JavaScript regular expressions for dividing a string into days, hours, and minutes (accounting for plural or singular forms)

My challenge is with handling different variations in a string var str = "2 Days, 2 Hours 10 Minutes"; When I use : str.split(/Days/); The result is: ["2 ", ", 2 Hours 10 Minutes"] This method seems useful to extract values like "days", "hours" and " ...

javascript

What is the best way to mention @here with an attachment?

I'm attempting to use the canvas say command to display an image with an @here mention included, but unfortunately it only shows the image without making the mention. Below is what I have attempted: message.channel.send(`@here\n`+attachment); ...

javascriptnode.jscanvasdiscorddiscord.js

Create specification for the properties of the child component

I am interested in working with the props of a parent element's children and validating those props. Can I achieve this using prop-types? export default function MyComponent(props) { return ( <div> {React.Children.map(props.chil ...

javascriptreactjsdictionarychildrenreact-proptypes

Ways to implement ng-show without using attributes

Is there a way to centrally add ng-show to elements in multiple places within my codebase for hiding them? Instead of individually adding ng-show in each template like this: <tr my-row ng-show="$ctrl.model.toShow()"></tr> We can simplify it ...

angularjs

Angular dynamic calculations for min and max values result in an unusual user interface

I am encountering an issue with a datetime-local input field that has max and min attributes. <input type="datetime-local" ng-model="model.date" min="{{min}}" max="{{max}}"> These attributes are dynamically set based on the date from another input ...

angularjs

Displaying nested JSON data in a user interface using React

I have a complex nested JSON structure that I am using to build a user interface. While I have successfully implemented the first part, I am encountering difficulties with the second part. My Objective The nested JSON displays parent elements and now I a ...

javascriptjsonreactjsjsx