Tips for updating a value within ng-repeat only if the value is equal to "string"; otherwise, hide it from display

I'm having trouble updating the data in my table to display "Yup" or blank space based on certain conditions. I am new to this and tried a solution, but it's not working: {{ person.value ? "Yup":" "}} .. Can anyone help me with this?

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.register = {
      value: [
        {value:"Yes"},{value:"no"},{value:"yes"},
        {value:"No"},{value:"no"}
      ],
    };
  }]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
    <thead>
       <tr align="center">
         <th>Value</th>
         <th>Replace</th>
       </tr>
    </thead>
    <tbody>
       <tr ng-repeat="person in register.value">
         <td align="center">{{ person.value }}</td>
         <td align="center">{{ person.value ? "Yup":" "}}</td>
       </tr>
    </tbody>
</table> 
</div>

javascriptangularjsmean-stack

Answer №1

If you're unable to modify your values, you can simply use the toLowerCase() method on the value to ensure it's in lowercase and then compare it with "yes"

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.register = {
      value: [
        {value:"Yes"},{value:"no"},{value:"yes"},
        {value:"No"},{value:"no"}
      ],
    };
  }]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
<table id="example" width="100%">
    <thead>
       <tr align="center">
         <th>Value</th>
         <th>Replace</th>
       </tr>
    </thead>
    <tbody>
       <tr ng-repeat="person in register.value">
         <td align="center">{{ person.value }}</td>
         <td align="center">{{ person.value.toLowerCase() == "yes" ? "Yup":" "}}</td>
       </tr>
    </tbody>
</table> 
</div>

The issue with your code not functioning properly is due to using a ternary operator (? :) which converts values into truthy values, where any non-empty string will always be true, resulting in every value being true and always displaying as "Yup"

Answer №2

angular.module('selectSample', [])
  .controller('SampleController', ['$scope', function($scope) {
    $scope.data = {
      values: [
        {value:"Yes"},{value:"no"},{value:"yes"},
        {value:"No"},{value:"no"}
      ],
    };
  }]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectSample" ng-controller="SampleController">
<table id="example" width="100%">
    <thead>
       <tr align="center">
         <th>Value</th>
         <th>Transformed</th>
       </tr>
    </thead>            
    <tbody>
       <tr ng-repeat="item in data.values">
         <td align="center">{{ item.value }}</td>
         <td align="center">{{ item.value.toLowerCase() == "yes" ? "Yup":" "}}</td>
       </tr>
    </tbody>
</table> 
</div>

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

Accessing the path to an imported file in Node.js

Currently, I am working on a parser and encountering imports such as ../modules/greeting.js. Additionally, I have an absolute path to the file from where I performed the import: C:\Desktop\Folder\src\scripts\main.js. I am seeking ...

javascriptnode.jsnpmpath

The autoIncrement feature is causing a syntax error at or near "SERIAL"

Encountering a build error : Unable to start server due to the following SequelizeDatabaseError: syntax error at or near "SERIAL" This issue arises only when using the autoIncrement=true parameter for the primary key. 'use strict'; export ...

javascriptangularjspostgresqlsequelize.js

When a click event triggers, use the .get() method in jQuery to retrieve the content of a page and then update

I am currently facing an issue with a div class="contentBlock", which is acting as the container for updating content. <div class="contentBlock"></div> Unfortunately, the script I have written does not seem to be working properly :c $(docume ...

javascriptjqueryhtmlajax

The sorting of objects by Lodash is not accurate

My aim is to arrange objects based on a specific property (price). var arr = [{ name: 'Apple', price: '1.03' }, { name: 'Cherry', price: '0.33' }, { name: &apo ...

javascriptarraysobjectlodash

Angular 5 offers the ability to incorporate dynamic checkbox input into your application

Here is my code snippet: <input [type]="'checkbox'" [(ngModel)]="inputValue"> <p>Value: {{ inputValue }}</p> I'm puzzled as to why the value in inputValue remains unchanged. Can anyone shed light on this? I am unable to ...

javascriptangularangular-forms

Update the JavaScript and CSS files following an AJAX request with $.get

I am encountering an issue where my global CSS and JS files contain all the necessary definitions, but when I load new HTML blocks via AJAX $.get, these new elements do not receive the correct CSS/JS definitions. Is there a convenient way to refresh the ...

javascriptjquerycssajax

The redirect feature in getServerSideProps may not function properly across all pages

Whenever a user visits any page without a token, I want them to be redirected to the /login page. In my _app.js file, I included the following code: export const getServerSideProps = async () => { return { props: {}, redirect: { des ...

javascriptreactjsnext.js

What is the process for importing a Kaggle dataset into Elasticsearch?

Having just started with elasticsearch, I am venturing into creating a movie search application. My plan involves sourcing data from kaggle and integrating it into my locally set up elasticsearch at localhost:9200. Upon visiting the localhost link, I came ...

javascriptreactjselasticsearchkaggle

Navigating within fixed-positioned divs

I'm attempting to create something similar to the layout seen on: The desired effect is to have fixed content on the right side, with only the left side scrolling up to a certain point before the entire page scrolls normally. However, in my implement ...

javascripthtmlcssscroll

Modify the values in a textbox using JavaScript to suit your needs

unusual issue: I'm encountering a strange bug with my form. I have an ajax datepicker attached to a text box, but when I submit the form, all values are received except for those from the datepicker checkboxes. Why is the .Text property empty for th ...

c#asp.netjavascript

The div structure generated through JavaScript appears distinct from its representation in the live DOM

Currently, I am facing a challenge with creating a complex nested Div structure within a JavaScript loop that iterates over JSON response objects from the Instagram API. The main goal is to set the URL for each image within a specific Bootstrap div layout. ...

javascriptjqueryhtml

What causes variations in running identical code between the Node environment and the Chrome console?

let myName = "World"; function functionA() { let myName = "FunctionA"; return function() { console.log(this.myName); } } functionA()(); Executing the code above in my terminal with node results in undefined, while running it in Chrom ...

javascriptnode.jsgoogle-chromescope

How to position button components at the center in a NextJS application?

Incorporating a button within my nextjs page has been a challenge as I am striving to position it in the center of the page for optimal viewing on both PCs and mobile devices. Despite various attempts, the button remains fixed on the far left side of the p ...

javascripthtmlcssreactjsnext.js

Inquiring about Vue component prop defaults and detecting when a user has not assigned a value

1. I am looking for a way to set a default value for a component prop in Vue 2. Take, for example, a basic movies component that can be utilized like this: <movies year="2016"><movies> Vue.component('movies', { props: ['yea ...

javascriptvue.jsvue-component

"Can you provide guidance on displaying a form for a specific element based on its unique ID

I am trying to display the edit form when clicking on a specific image, but it is currently showing for all tasks. I need help in figuring out how to make it show only for one task. I attempted to use useState to change the boolean value "active" to show ...

javascriptreactjsreact-hooks

Guide on linking AngularJS user interface with Python server via RESTful API?

Can someone please explain the process of connecting two parts? Specifically, I am using Angular CLI for the front-end and Python for the logic. My goal is to send text responses from the front-end to my Python back-end and receive a response in return. ...

pythonangularjsrest

Creating a fresh JSON structure by utilizing an established one

I have a JSON data that contains sections and rubrics, but I only need the items for a new listing. The new object named 'items' should consist of an array of all the items. The final JSON output should be sorted by the attribute 'name&apos ...

javascriptjsonangulartypescript

Utilizing Windows Azure and restify for node.js Development

I have an azure website with a URL like: . In my server.js file, I have the following code: var restify = require('restify'); function respond(req, res, next) { res.send('hello ' + req.params.name); next(); } var server = restify ...

javascriptnode.jsazurerestify

Place a Three.js scene within a jQuery modal dialogue box

I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension. Y ...

javascriptjquerycsscanvasthree.js

Sorts through nested arrays to uncover distinctive product assortments

Currently, I am in the process of developing a website using Next.js and Shopify. My objective is to create a page that displays all collections matching a specific productType. To achieve this, I have been exploring ways to extract this data from the Gra ...

javascriptreactjsnext.jsshopify