Obtain data from ng-model in AngularJS $scope

I am using the angularjs framework to create a form.html and a controller.js. In the controller, I have a variable that retrieves the SSID of a box. My question is, how can I automatically assign the value of this variable in the input field of the form? I want the form to display the SSID without requiring the user to manually enter it.

$scope.SSID {}; return [object Oject] in input form ng-model="SSID"

Any help would be greatly appreciated.

Controller.js

/*Controller*/

'use strict';

angular.module('djoro.controllers')
.controller('WifiSmartConfigCtrl', function($scope, $window, $ionicPlatform) {a
    $scope.SSID = {};

    $scope.getSSID = function() {
        var onSuccess = function(SSID) {
            $scope.SSID = SSID;
            return SSID;
        };
      
        var onFail = function() {};

        $ionicPlatform.ready(function() {
            $window.cordova.plugins.Smartconfig.getSSID(onSuccess, onFail, $scope.SSID);
        });
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<ion-pane>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
    </ion-header-bar>
    <ion-content ng-controller="WifiSmartConfigCtrl">

        <form novalidate class="simple-form">
            <fieldset>
                <legend>WI-FI</legend>
                <div class="list input-fields">
                    <label class="item item-input">
                        <span class="input-label">SSID :</span>
                        <input type="text" name="test" ng-model="SSID" id="SSID" placeholder="SSID" required show-hide-input>
                    </label>
                    <label class="item item-input" show-hide-container>
                        <span class="input-label">Password :</span>
                        <input type="passwprd" name="test" placeholder="Password" required show-hide-input>
                    </label>
                </div>
            </fieldset>
        </form>
    </ion-content>
</ion-pane>

Answer №1

In order to automatically retrieve the SSID in your UI, you have defined a function within the scope, but it appears that this function is not being called from the user interface. To ensure its execution and display in the UI, you should include a call to it during controller initialization.

The following code snippet showcases how your controller should be structured:

.controller('WifiSmartConfigCtrl', function($scope, $window, $ionicPlatform) {
    $scope.SSID = {};

    var onSuccess = function(SSID) {
        $scope.SSID = SSID;
        return SSID;
    };

    $ionicPlatform.ready(function() {
        $window.cordova.plugins.Smartconfig
            .getSSID(onSuccess, angular.noop, $scope.SSID);
    });
});

Answer №2

    The cordova plugin "smartConfig" is essential for my app development.

/*plugin.js*/

        function Plugin(){}

    Plugin.alert = function(content){
          var onSuccess = function(){};
          var onFail = function(){};
          cordova.exec(onSuccess, onFail, 'SmartconfigPlugin', 'alert', [content]);
    };


    Plugin.getSSID = function(onSuccess, onFail){
          cordova.exec(onSuccess, onFail, 'SmartconfigPlugin', 'getSSID', []);
    };

    module.exports = Plugin;

SmartConfig.java

package fr.enersy.cordova.smartconfig;

import org.json.JSONArray;
import org.json.JSONException;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import android.R;
import android.content.Context;
import android.content.DialogInterface;
import android.app.AlertDialog;
import android.util.Log;
import com.integrity_project.smartconfiglib.SmartConfig;
import com.integrity_project.smartconfiglib.SmartConfigListener;
import com.pandaos.smartconfig.utils.NetworkUtil;
//import fr.enersy.cordova.smartconfig.mySmartconfigListener;   // TODO remove from config.xml

public class SmartconfigPlugin extends CordovaPlugin {

  // Variables declaration
  SmartConfigListener smartConfigListener;
  SmartConfig smartConfig;
  byte[] freeData;

  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

    if("alert".equals(action)){
      final String content = args.getString(0);
      showAlert(content);
      callbackContext.success();
      return true;
    }

    else if("getSSID".equals(action)){
        String SSID = getSSID();
        callbackContext.success(SSID);
        return true;
      }

  }

  private String getSSID() {
      Log.i("--->> SmartconfigPlugin", "Enter getSSID");
      String SSID = (NetworkUtil.getWifiName(this.cordova.getActivity())).trim();   // TODO replace by something like: smartconfig_network_name_field.getText().toString().trim();
      Log.i("---------->> SmartconfigPlugin", "SSID: " + SSID);

      Log.i("---------->> SmartconfigPlugin", "Exit getSSID");
      return SSID;
  }

}

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

jQuery is unable to manipulate newly added DOM elements that have been loaded via AJAX

Having trouble with jquery ajax. Unable to interact with newly added element through ajax. Code snippet: $(".yorum_input").keypress(function(e) { if (e.keyCode == 13) { e.preventDefault(); var alt_id = $(this).attr('yorum_id'); va ...

Retrieve information from a URL using an Express API

Every 45 minutes, my API receives a request: GET http://MyHost/mediciones/sigfox_libelium/{device}/{data}/{time}/{customData#trama} I need to extract {device}, {data}, {time}, and {customData#trama} from the URL and store them in separate variables. This ...

Toggling Legends in D3.js interactivity

My line graph displays nested data with user-selected keys. Each key has 4 child values, each represented by a line on the graph. If 2 keys are selected, there will be a total of 8 lines on the graph. I've created a legend that shows the child value ...

How can I rearrange divs using CSS? Can I add parent 1 in between the children of parent 2

Check out my current HTML code structure: <div class="container> <div class="parent1"></div> <div class="parent2"> <div class="child1"></div> <div class="child2"></div> </div ...

Tips for avoiding the exposure of full user models in the jade template

As I work on the login functionality of my project, I'm utilizing express, passport-local, and mongoose. My code includes a series of routes: module.exports = function (app) { app.get('/', function (req, res) { res.render(' ...

Converting data to JSON geometry format for implementation in Three.js

Currently, I am in the process of creating an exporter using Maxscript to convert data into JSON format for use in Three.js. Information on this topic is scarce, but I did come across a helpful resource: https://github.com/mrdoob/three.js/wiki/JSON-Geometr ...

A guide to setting properties using a Proxy object

Within my class, I have included a Proxy which is structured as follows: export class Row<T extends ModelItems> { private _row: T = <T>{} public constructor(rowItems?: T) { if (rowItems) { this._row = rowItems } return new Proxy( ...

Develop a selection tool based on certain column information - utilizing JavaScript

I'm currently working on a table with a large amount of data, and I'd like to implement a select option for filtering. While I have successfully added the filter with the select element, my concern is how to dynamically populate the options witho ...

Can you explain the functionality of this code in terms of conditional statements without the use of "if" or "else if" statements?

Upon encountering a nested logic problem that required solving, I stumbled upon an unconventional solution online which caught my eye. The code structure seemed unfamiliar to me and it intrigued me how the use of "if" and "else if" statements was differe ...

Javascript functions properly on Chrome, Opera, and Edge browsers, but unfortunately does not work on FireFox and IE 11

If you're interested, I have some code available on JS Fiddle that showcases my skills. var getJSON = function (url) { "use strict"; return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get' ...

Implement Clip Function with Gradient Effect in JavaScript on Canvas

Trying to incorporate the clip() function within the canvas element to create a unique effect, similar to the one shown in the image. I have successfully achieved a circular clip, but I am now aiming for a gradient effect as seen in the example. How can th ...

What are the steps involved in searching for a document in MongoDB with Mongoose?

Looking to query MongoDB documents that contain an array of objects and remove a specific object with a particular value? Here are some tips: Check out this example of a document schema: const mongoose = require("mongoose"); const LibrarySchema ...

Discover the best locations within the city using Google's API to search by category

Users will choose a city and a type of place. The desired output is a Google Map showing all places in that city with the selected category. I'm looking to achieve this using Google Maps APIs. So far, I've tried using the Places API but it onl ...

What is the best method for choosing HTML "ids" that are generated automatically by DevExpress controls using JavaScript DOM manipulation?

How can I create a pop-up that displays unique information for each of the hundreds of html divs with a common class but individual ids generated by DevExpress Controls? I have a large number of automatically generated html div "ids" and I'm looking ...

What is the best way to incorporate two separate events in AngularJS for a DOM element based on whether the user is accessing the site

I am currently in the process of transitioning my application from relying on numerous jQuery Widgets to incorporating AngularJS. However, I am facing difficulties in finding an optimal solution for the following issue. There is an image that should displ ...

Tips for returning an element to its starting position following animation

Hey there, I’m fairly new to the world of HTML and CSS. Recently, I was working on creating a YouTube clone website and I’ve run into an issue with the navigation. On the official YouTube website, when you click on the hamburger menu icon, the naviga ...

Is it possible to use JavaScript to upload and manipulate multiple HTML files, replacing text within them to create new output HTML pages?

Is it possible to modify the following code to accept multiple files, process them, and then return the output? <html> <head> </head> <body> <div> <label for="text">Choose file</label> <inp ...

Encountering Errors with Angular JS Following Update from Version 1.1.0 to 1.1.1

After upgrading, I noticed that the ng-repeat function is taking significantly longer to load and is attempting to display additional content boxes without serving the actual content provided by $resource. I have pinpointed the issue to the update from ve ...

Vue.js CSS class interpolation

Is there a way to apply CSS classes dynamically in Vue.js? {{ category.icon }} --> "icon1" I am trying to achieve the following: <i :class="category.icon" class="icon icon-"></i> The desired output should be: ...

What is the outcome when there is code present after a $location.path('new/path') function call?

When I use $location.path('new/path') to change the path, how does it affect the code that comes after it? Will the rest of the code continue running before the path changes, or will they happen in parallel? For example, if there is a time-consum ...