CODEWITHSUNDEEP
javascriptangularjs
Dhara
Dhara

Reputation: 1972

Redirect to page on button click in angular js

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..

Upvotes: 1

Views: 734

Answers (1)

pryxen
pryxen

Reputation: 413

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"

Upvotes: 2

Related Questions