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