Having trouble with ng-show not functioning as planned

Here is the code snippet that I have been working on:

HTML Code (updata.html)

<form role="form" ng-submit="submit()">
<input type="text" ng-model="query" >
      <div class="item item-input item-stacked-label item-divider">
      <li ng-repeat="name in names | filter:query" ng-show="(!name.selected&&query)">
      <button type="button" ng-click="name.selected=true; addname(name)">{{name.name}}</button>
    </li>

      </div>
      <li ng-repeat="name in names" ng-show="name.selected">{{name.name}}</li>
 <div class="padding">
      <button type="submit" class="button button-block button-positive">Submit</button>
    </div>
</form>

Angular JS Code

 angular.module('starter', ['ionic','ngCordova','ngRoute'])
.run(function($ionicPlatform) {
 $ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the   accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}
});
})
.config(['$routeProvider',function($routeProvider) {
 $routeProvider.when(
 '/',{
  templateUrl: 'main.html',
  controller: 'datactr'
}
)
.when(
'/indata',{
  templateUrl:'updata.html',
  controller:'datactr'
})
.when(
'/outdata',{
  templateUrl:'outdata.html',
  controller:'datactr'
})
.otherwise({
redirectTo:'/'
})
}])
.controller('datactr',['$scope','$http',function($scope,$http) {
$scope.submit=function(){
          console.log("step1");

    $http({
      method:'POST',
      url:'http://awesomeg.2fh.co/updata.php',
      crossDomain : true,
      data:{
         'name':$scope.namefinal
          }
      }).success(function(data,status,header,config){
      console.log("step2");
      console.log(data);
      $scope.namefinal="";
      $scope.message="You have successfully updated the database";
    })
    $scope.names=[{'name' :'harry',
'selected':false},{'name' :'george',
'selected':false}];
$scope.namefinal=[];
$scope.addname=function(test){
$scope.namefinal.push(test.name);
}     
}])

This specific segment of my Ionic code involves an array of objects called "names" with properties like name and selected. As a user types in a name, suggestions are provided. When a suggestion is clicked, the selected property of the corresponding object should change to true. The expected outcome is to see a list of selected object names at the bottom, but it doesn't display as intended.

I am seeking assistance from anyone who can help troubleshoot this. Thank you!

Answer №1

There appears to be an error in the spelling

<li ng-repeat="name in names | filter:query" ng-show="(!name.setected&&query)">

The correct code should read

ng-show="(!name.selected&&query)"

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

Is there a way to repeatedly call a function without losing its previous outputs, without relying on a database? What alternative should I consider using instead?

I'm looking to create multiple tables using the same function in JavaScript. However, when I call the function again, the previous table disappears. I am new to coding in JavaScript and would appreciate any suggestions on how to handle this issue. I p ...

XState: linking together multiple promises seamlessly without needing intermediate states

After reading the Invoking Multiple Services section, it seems that despite being able to invoke multiple promises, they appear to be triggered without waiting for the previous one to complete in my own tests. // ... invoke: [ { id: 'service1' ...

tablesorter retains information even when it is running the ".empty()" function

Having an issue with the jquery tablesorter plugin. For some reason, it's not clearing the data after fetching new data from my JSON source. I've tried moving the tablesorter call around but it keeps appending to itself. Interestingly, when I ...

Showcase information from APIs using Vue.js

I am facing an issue where I am able to fetch data correctly from the API, but I am unable to display it. When I manually input items, they are displayed, but the items fetched from the API remain invisible. I even attempted to move the API call directly i ...

Tips for setting a value in $scope within an ng-repeat loop in AngularJS

I'm currently facing an issue with ng-repeat in angularJS, specifically on how to assign a value in $scope inside ng-repeat. Here is my scenario: I have a JSON file that contains all the data structured like this: [ {BookID:1,Chapter:1,ContentID:1, ...

Guide on Configuring Print Page using Fresh HTML Codes with jQuery

Having an issue with printing a Bootstrap modal exactly as displayed? Check out this Print Problem Despite trying various solutions, none have solved my problem. Therefore, I am exploring a new approach. Does anyone know how to dynamically print new HTML ...

"Can you explain the process by which React grabs the props using the code `const props = this.props

I recently came across an interesting article authored by Dan. The example provided in the article caught my attention: class ProfilePage extends React.Component { showMessage = (user) => { alert('Followed ' + user); }; handleClick ...

using JQuery, add a class on click event or on page load

Solved It! After encountering a problem created by some sloppy moves on my part, I managed to solve it. However, another issue arose: adding the class current to li with data-tab="tab-1 upon page load. $('ul.tabs li').click(function(){ ...

What is the best way to update the text on buttons once they've been clicked for a variety of buttons

I'm encountering an issue with multiple buttons where clicking on any button causes the text to change on the first button, rather than the one I actually clicked on. All buttons have the same id, and using different ids for each button seems impracti ...

The fullscreen API allows for the creation of a full-screen element containing internal elements, while also enabling the functionality

Is it possible to utilize the fullscreen API to make any element fullscreen, even if it contains multiple internal elements, while still maintaining the functionality of dropdowns and other custom elements that may be located in different areas of the page ...

What is the reason behind the cautionary note associated with Vue's provide and inject functionality?

Considering incorporating Vue's new provide/inject feature into a project, I came across a warning in the official Vue documentation: The documentation states that provide and inject are primarily intended for advanced plugin/component library usage ...

employing iframes dynamically to overlay a webpage

I inserted this iframe into a webpage <iframe src='http://redbug.redrocksoftware.com.au:80/Pages/chamara.html' style="position:absolute;z-index:1;" ></iframe> The chamara.html page has a button that, when clicked, should cover the c ...

Timer client-side script is malfunctioning

While diving into the realm of Asp.net Ajax, I decided to experiment with calling javascript from my C# script. I created a timer that triggers a method to execute a basic javascript alert function and update the time every 10 seconds. Even though my code ...

Backend is currently unable to process the request

Whenever a user clicks on a note in my notes page, a request is supposed to be made to the backend to check if the user is the owner of that particular note. However, for some reason, the request is not being processed at all. The frontend is built using ...

Is it Unwise to Depend on Props within the useReducer Hook?

Within my App() component, I utilize props named data. This particular component relies on a useReducer hook to manage its state. The reducer function is responsible for determining when to display or hide specific data based on the state. Additionally, it ...

Does JavaScript array filtering and mapping result in a comma between each entry in the array?

The code snippet above showcases a function that retrieves data from a JSON array and appends it onto a webpage inside table elements. //define a function to fetch process status and set icon URL function setServerProcessesServer1761() { var url = "Serv ...

Angular's Material Design Autocomplete feature with remote data sourcing and how its performance compares to the most effective methods

In my current project, I am utilizing an Angular material autocomplete feature that fetches data via AJAX. I am facing a dilemma trying to determine the most efficient approach. Below is a snippet of my code: $scope.loadOrganizations = function () { ...

``The value in the drop-down of the Modal Window is not dynamically updated based on the

When attempting to edit a drop-down menu within a modal window, I encountered an issue where the drop-down list for a specific field was not updating with the model values. Despite setting and receiving the values correctly, the list remained unchanged. T ...

axios encountered a JSON parsing issue due to an unexpected character in the server's response

I'm encountering an issue with JSON parsing as I attempt to retrieve data from a server endpoint. This is the first instance where Axios is unable to automatically decode the JSON response. Upon inspecting my code, I noticed that Axios is detecting ...

Dynamic Entry: The Art of JQuery Animation

I want to achieve a sequential flying-in effect when my page loads, with each div sliding in one by one. Currently, all the divs fly in simultaneously, but I'd like them to come in sequentially. Here is my code snippet: <script> function ani ...