Redirect to page on button click in angular js

Question

After adding music I want to redirect on main page on cancel and save..

var app = angular.module("musicApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider.when("/Items", {
      templateUrl: "view-list.html",
      controller: "listController"
    })
    .when("/Items/add", {
      templateUrl: "view-detail.html",
      controller: "addController"
    })
    .when("/Items/:index", {
      templateUrl: "view-detail.html",
      controller: "editController"
    })
    .otherwise({
      redirectTo: "/Items"
    });
});


app.factory("productService", ["$rootScope", function($rootScope){
  var service={};
  var data = [{
      name: "Artist1",
      genre: "Genre1",
      rating: "Rating1"
    }, {
      name: "Artist2",
      genre: "Genre2",
      rating: "Rating2"
    }];

    service.getProducts = function(){};
    service.addProduct = function(product){};
    service.editProduct = function(product){};
  return service;
}]);
app.controller("listController", ["$scope", "$location", "$routeParams",
  function($scope, $location, $routeParams) {

    $scope

    $scope.addProduct = function() {
      $location.path("/Items/add");
    };

    $scope.editItem = function(index) {
      $location.path("/Items/" + index);
    };

  }
]);

app.controller("addController", ["$scope", "$location", "$routeParams",
  function($scope, $location, $routeParams) {
    $scope.save = function() {
      $location.url("/Items");
    };
    $scope.cancel = function() {
      $location.path("/Items");
    };
  }
]);


app.controller("editController", ["$scope", "$location", "$routeParams",
  function($scope, $location, $routeParams) {
    $scope.save = function() {
      $location.path("/Items");
    };
    $scope.cancel = function() {
      $location.path("/Items");
    };
  }
]);

Main portion to go on main page is like:

app.controller("addController", ["$scope", "$location", "$routeParams",
  function($scope, $location, $routeParams) {
    $scope.save = function() {
      $location.url("/Items");
    };
    $scope.cancel = function() {
      $location.path("/Items");
    };
  }
]);

It does not redirect me to the main page where all my products are listed..

yes @Khaleel plnkr.co/edit/tMAUSbCR4sXga9ilnmMe?p=preview please check this out — Dhara
– Dhara, Commented Feb 8, 2017 at 6:37
you got an error in your "view-detail.html". You forgot to put double quotes in data-ng-model="item.name" and other model — pryxen
– pryxen, Commented Feb 8, 2017 at 6:41

pryxen · Accepted Answer · 2017-02-08 06:46:00Z

2

view-detail.html

<div class="form-group">
  <label for="txtName">Product Name</label>
  <input type="text" id="txtName" class="form-control" data-ng-model="item.name" />
</div>

<div class="form-group">
  <label for="cboGenre">Genre</label>
  <input type="text" id="cboGenre" class="form-control" data-ng-model="item.genre"/>
</div>

<div class="form-group">
  <label for="cboRating">Rating</label>
  <input type="text" id="cboRating" class="form-control" data-ng-model="item.rating"/>
</div>

<div class="form-group">
  <button class="btn bth-primary" data-ng-click="save()">Save</button>
  <button data-ng-click="cancel()" class="btn bth-primary">Cancel</button>
</div>

You forgot to put " " double quotes in your data-ng-model=item.name it should be data-ng-model="item.name"

answered Feb 8, 2017 at 6:46

pryxen

4331 gold badge4 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Redirect to page on button click in angular js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related