Display information using AngularJS within the Ionic framework

I am attempting to display a variable that is within a for loop. Here is my code where I store the value of $scope.datosTuto[i].Nombre in a variable. When I use an alert to print $scope.NombTuto, I can see the data but I want to display it on my HTML page.

MostrarTuto.servicioMostrarTuto().success(function(data){
    $scope.datosTuto=data;
    var TamanioURI = $scope.datosTuto.length;
    for ( i=43; i < TamanioURI; i++) {  
      if ($scope.nom_coe == $scope.datosTuto[i].Residencia){
        $scope.NombTuto=$scope.datosTuto[i].Nombre;
        alert($scope.NombTuto+" ...");
      };
    };
  })

This section displays my HTML page:

<div class="list card">
      <ion-list>
        <ion-item class="item item-icon-left" type="item-text-wrap" ng-repeat="i in datosTuto">
          <i class="icon ion-ios-checkmark-outline"></i>
          <h2>Nombre: {{i.Nombre}}</h2>
          <h2>Horario: {{i.Sexo}}</h2>
        </ion-item>
      </ion-list>
    </div>

I just need help with printing this $scope.NombTuto on my page. Any assistance would be greatly appreciated. Thank you!

Answer №1

To access, define $scope.NombTuto outside the function.

$scope.NombTuto = '';
MostrarTuto.servicioMostrarTuto().success(function(data){
    $scope.datosTuto=data;
    var TamanioURI = $scope.datosTuto.length;
    for ( i=43; i < TamanioURI; i++) {  
      if ($scope.nom_coe == $scope.datosTuto[i].Residencia){
        $scope.NombTuto=$scope.datosTuto[i].Nombre;
        alert($scope.NombTuto+" ...");
      };
    };
  }) 

In an html context

Matched value : {{NombTuto}}
<div class="list card">
      <ion-list>
        <ion-item class="item item-icon-left" type="item-text-wrap" ng-repeat="i in datosTuto">
          <i class="icon ion-ios-checkmark-outline"></i>
          <h2>Name: {{i.Nombre}}</h2>
          <h2>Schedule: {{i.Sexo}}</h2>
        </ion-item>
      </ion-list>
    </div>

Updated solution for NumbTuto as an array

$scope.nom_coe = 'test';
$scope.NombTuto = [];
$scope.NombTutoStr = '';
$scope.datosTuto=
    [
        {"id":"1","fecha_trama":"2015-07-08","hora_trama":"08:21:12", "Residencia" : 'test', "Nombre" : "Name1"},
        {"id":"2","fecha_‌​trama":"2015-07-08","hora_trama":"08:22:42","Cliente":"1", "Residencia" : 'test1', "Nombre" : "Name2"},
        {"id":"3","fecha_trama‌​":"2015-07-08","hora_trama":"08:25:34","Cliente":"1","Cedula":"1103456789", "Residencia" : 'test', "Nombre" : "Name3"}
    ];
var TamanioURI = $scope.datosTuto.length;
for ( i=0; i < TamanioURI; i++) {  
  if ($scope.nom_coe == $scope.datosTuto[i].Residencia){
    $scope.NombTuto[$scope.datosTuto[i].id]=$scope.datosTuto[i].Nombre;
    $scope.NombTutoStr = $scope.NombTutoStr ? $scope.NombTutoStr +","+$scope.datosTuto[i].Nombre
                        : $scope.datosTuto[i].Nombre;
    alert($scope.NombTuto[$scope.datosTuto[i].id]+" ...");
  };
};

Html representation

<div class="list card">
        Matched values : {{NombTutoStr}}
        <ion-list>
          <ion-item class="item item-icon-left" type="item-text-wrap" ng-repeat="i in datosTuto">
            <i class="icon ion-ios-checkmark-outline"></i>
            <h3>Name: {{i.Nombre}}</h3>
            <h3>Schedule: {{i.Sexo}}</h3>
            <div>
                <p ng-show="NombTuto[i.id]">NombTuto :: {{NombTuto[i.id]}}</p>
            </div>
            ---------------------------------------------------------------
          </ion-item>
        </ion-list>            
    </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

Are you unsure whether to use Ajax or jQuery? If you need assistance in adding parameters to

Currently delving into ajax/jQuery and encountering some hiccups. Here's the code snippet: .click(function() { var period = 'ALL'; if ($('#registerat input:checked').val() != 'ALL') period = ...

Issue with Colorbox plugin preventing ASP.NET button from triggering postback

Currently utilizing the colorbox modal plugin (http://colorpowered.com/colorbox/) I'm facing an issue with a simple form placed in a master page - the submit button is unresponsive and doesn't trigger any action. It seems like several users are ...

JMeter recording displays a script alert error notification

After recording the JMeter script on blazemeter, it initially worked fine on the website. However, upon running the jmx file, I encountered an error message: "alert("Something went wrong. Please try again");window.history.back();" I&a ...

Difficulty in jQuery's clone() function: cloning an input element without its value

I have successfully implemented jquery's .clone() method, but I'm facing an issue where the value of the previous input field is also getting cloned along with it. How can I prevent this from happening? Below is my code snippet: function addrow ...

The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving ...

Retrieving data from an HTML Table using Javascript

I am in the process of designing a dynamic web form that populates from a stored procedure. The form consists of a table with a dropdown list, a text box, and a label. While I can successfully retrieve data from the dropdown and text box, I am facing diffi ...

How to make a HTML div background fill the entire page

Is there a way to extend the background in a div so that it adjusts to fit the screen resolution? I also want to include a navigation bar at the top right corner of this div for the intro page. There will be additional content in other divs positioned be ...

How can `localePath()` be utilized to create a dynamic route with Nuxt i18n?

I currently have this route set up in my i18n.config.js: { pages: { 'rental/_id': { nl: '/verhuur/:id', en: '/rental/:id', de: '/mietbestand/:id', }, } } When attempting to link to this page in my ...

PhpStorm flawlessly detects ES7 type hinting errors

For my project, I have implemented TypeScript. While JavaScript's array includes() function has been valid since ECMA6, setting the lib parameter in tsconfig to "es6" results in a non-fatal error being thrown in the browser console when using the foll ...

Efficiency of Promise-based parallel insert queries in MySQL falls short

I have developed a code in Node.js to execute insert queries using Promise.js but unfortunately, I am encountering an exception stating "Duplicate Primary Key" entry. Here is the snippet of the code: var Promise = require("promise"); var mySql = requir ...

Passing a string to a function in AngularJS through ng-click

How can I pass a string to a function using ng click? Here's an example: HTML <a class="btn"> ng-click="test(STRING_TO_PASS)"</a> Controller $scope.test = function(stringOne, stringTwo){ valueOne = test(STRING_TO_PASS); } Edit - ...

Tips for Passing Parameters to Vuex mapActions correctly:Executing mapActions in Vuex requires a specific

I am facing an issue with my ProjectPage.vue where I display project issues in a v-data-table. The projects are fetched from a server API call in the sidebar and displayed there. Once I select a project, I want to use its id to retrieve its corresponding i ...

Navigate a user upon completion of an update

My webpage requires users to click an update link, which triggers a process of fetching data from an API that takes a few minutes. I don't want users to have to constantly refresh the page to know when the process is complete and they can continue. Is ...

Circular movement in ThreeJS within a specified duration

I am currently working on creating a circular motion for an object within a set time frame. This project involves designing a clock with smooth motion. Instead of simply updating the position to fixed coordinates every time .getSeconds() changes, I aim t ...

The Mysteries of Key Codes in JavaScript

I'm curious about the character codes used for keyboards. Recently, I came across an informative article discussing this topic. In particular, I am interested in finding out which key code to use when a user presses both the alt and down arrow keys s ...

Having an issue in Angular 2 where the correct function is not triggered when a button is placed within a selectable anchor

Within an anchor element, I have a button that triggers its own click listener for an editing popup module. The anchor itself has another click listener assigned to it. For example: <a (click)="onClick(myId)" class="list-group-item clearfix"> < ...

The deployed MVC code encountered an unexpected token "u" in the JSON at position 0

I have a MVC 5 application that is functioning well in the development environment. However, when I publish and deploy it to the testing server (or any other server), I encounter a JavaScript error when clicking on the login button: Uncaught SyntaxError ...

Interacting with HTML elements in Java programming

I am facing a challenging situation that requires some brainstorming. I would greatly appreciate any advice or guidance in the right direction. My goal is to incorporate a Google Map into my Java Swing project, with the map being specified as a URL wit ...

Conditional rendering is effective for displaying a form item based on certain conditions, but it may not be as effective for

I want a textarea element to appear or disappear based on the selected state of the radio buttons before it. If "no" is chosen, the textarea will be hidden, and if "yes" is chosen, the textarea will become visible. <fieldset class="input-group form-che ...

Creating vibrant squares using HTML and CSS

My objective is to incorporate 3 input options for selecting the color, size, and amount of cubes. The image below showcases my peer's final project, but unfortunately, he refused to share the code with me. We were given a basic template to begin with ...