Is ng-model different with ionic? Maybe scope bug?


#1

Hey there, I’m a newcomer to ionic, over the course of the past month I’ve been learning angularJS, and building a mobile app with it. I was getting pretty frustrated with the design part of it, since it kept getting in the way of learning angular. Anyways I did some research and I found Ionic, which is awesome from the looks of it, but I’m running into a little issues and it’d be awesome if you could provide some insight for a solution for me.

In my pure AngularJS project, I have a search input (ng-model=“searchid”) which after recieving data ng-repeat’s itself, and it works fine, but when I transfered it over to my ionic powered project, it no longer works, unless I hard code in the search parameters. Not very sure how to explain the error as I’m new to angular, but i’ll post my code below.

non-ionic: ***This works fine as is---------------------------------------------------------------------

Routing:

app.config(function ($routeProvider) {
	$routeProvider
	.when("/user", { controller:"UserCtrl" , templateUrl: "partials/user.html"})
	.when("/item/:id", {controller:"ItemCtrl", templateUrl: "partials/single.html"})
	.when("/paint/:id", {controller:"PaintCtrl", templateUrl: "partials/paint.html"})
	.when("/search/", {controller:"SearchCtrl", templateUrl: "partials/search.html"})
	.otherwise({redirectTo: "/"});


});

search.html

<input type="text" ng-model="searchid">
  <ul>
      <li ng-repeat="result in search">{{result.brandname}}</li>
  </ul> 

Controller:

controllers.controller('SearchCtrl', function ($scope, $http, $routeParams) {
$scope.search;

//var searchid = $routeParams.id; // no longer needed


var searchresults = function (searchid) { $http.jsonp('http://experiments.dev/api/search/s/' + searchid + '?callback=JSON_CALLBACK').then(function (data){
	$scope.search = data.data;
	console.log(data);
	console.log(searchid);

});
}
$scope.searchid = ' ';
$scope.$watch('searchid', searchresults, true);

searchresults();
});

Ionic Project *this doesn’t work :’( ---------------------------------------------------------

Routing:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

    .state('app.search', {
      url: "/search",
      views: {
        'menuContent' :{
          templateUrl: "templates/search.html",
          controller: 'SearchCtrl'
        }
      }
    })

search.html

 <ion-view title="Search">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>




  <ion-content class="has-header">
  <input type="type" ng-model="searchid">
  <ul>
    <li ng-repeat="result in search">{{result.brandname}}</li>
  </ul> 
  </ion-content>






</ion-view>

Controller:

controllers.controller('SearchCtrl', function ($scope, $http, $state) {
	$scope.search;
	console.log($state)
	var searchresults = function (searchid) { $http.jsonp('http://experiments.dev/api/search/s/' + searchid + '?callback=JSON_CALLBACK').then(function (data){
		$scope.search = data.data;
		console.log(data);
		console.log(searchid);
	});
}
$scope.searchid = ' ';
$scope.$watch('searchid', searchresults, true);

searchresults();
});

For some reason, that doesn’t work, if I manually set the searchid, it works fine tho. I’d appreciate any type of input i recieve on this. Thank you! and have a great day


#2

I have a similar problem. An ng-model is undefined inside my ng-click function, or not updated correctly if I initialize it with some value.


#3

You need to learn about “dot notation”.

See here : Issue with model binding when using ionic & https://github.com/angular/angular.js/wiki/Understanding-Scopes

If that doesn’t help, then please setup a CodePen sample and we’ll try to help you out.