Accessing input field from Angular controller results in undefined

Question

So I have a search box that I enter text into then submit, this should send the data to my Angular controller and allow me to access it however I'm just getting undefined when doing so.

The issue is caused when trying to access the field by using $scope.searchtext

My code is as follows:

angular.module('starter.controllers', [])

.controller('SearchCtrl', function ($scope, $http, $ionicLoading) {

$scope.results = [];

$scope.search = function () {
    $ionicLoading.show({ template: 'Loading...' });

    $http.get('https://www.googleapis.com/youtube/v3/search?part=snippet&q=' + $scope.searchtext + '&key=').
        then(function (data) {

            var searchResults = data

            angular.forEach(searchResults.data.items, function (val, i) {

                $http.get('https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails&id=' + val.id.videoId + '&key=').
                then(function (data) {

                    var durationResults = data
                    var duration = durationResults.data.items[0].contentDetails.duration.replace("PT", "").replace("H", ":").replace("M", ":").replace("S", "")

                    $scope.results.push({ thumbnail: val.snippet.thumbnails.medium.url, title: val.snippet.title, channel: durationResults.data.items[0].snippet.channelTitle, description: val.snippet.description, duration: duration })
                });

            });
        });

    $ionicLoading.hide();
};

})


<ion-view title="Search for Music">

    <ion-content scroll="true" class="has-header padding">

        <form ng-submit="search()" class="list list-inset">
            <label class="item item-input">
                <i class="icon ion-search placeholder-icon"></i>
                <input type="search" name="searchtext" ng-model="searchtext" placeholder="Search">
            </label>
        </form>

        <ion-list>
            <ion-item ui-sref="home" ng-repeat="result in results" class="item item-thumbnail-left">
                <img src="{{result.thumbnail}}">
                <h2>{{result.title}}</h2>
                <strong>{{result.channel}}</strong>
                <p>{{result.description}}</p>
                <p>Duration: {{result.duration}}</p>
            </ion-item>
        </ion-list>

    </ion-content>
</ion-view>

Community · Accepted Answer · 2017-05-23 12:23:50Z

1

ion-content does create child scope dealing with that DOM, In that case you can use AngularJS Prototypal inheritance.

Code

.directive('ionContent', [
  '$parse',
  '$timeout',
  '$ionicScrollDelegate',
  '$controller',
  '$ionicBind',
function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    require: '^?ionNavView',
    scope: true, //<-- this creates a prototypically inherited scope
    template:
    '<div class="scroll-content">' +
      '<div class="scroll"></div>' +
    '</div>',

Do follow dot rule while declaring ng-model like define searchtext as an object property that will tend to follow javascript prototypal.

Markup

<input type="search" name="searchtext" ng-model="model.searchtext" placeholder="Search">

Controller

$scope.model = {};

Similar SO answer here

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Sep 5, 2015 at 17:55

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Over a year ago

Ah I see, apologies, I'm new to Angular. That's fixed my issue!

Pankaj Parkar Over a year ago

@TomWilson np..Glad to help you..Thanks

Abhijeet · Accepted Answer · 2016-03-28 09:48:48Z

0

Use can also use $parent to access the value of controller.

<input type="search" name="searchtext" ng-model="$parent.searchtext" placeholder="Search">

answered Mar 28, 2016 at 9:48

Abhijeet

1,5551 gold badge11 silver badges21 bronze badges

Collectives™ on Stack Overflow

Accessing input field from Angular controller results in undefined

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related