Proceed to another view on button click AngularJS

Question

I have a drop down which is displaying data from a Web API. The data is shown below

here's the code for the drop down

<select ng-model="details" ng-options="x.Name for x in customers"></select>

then I have a text box and a button:

<input type="password" ng-model="pin" ng-required="true"/>
<button ng-click="pinForm.$valid && (count = count + 1)" ng-init="count=0">Proceed</button>

Now there are 2 things I want to implement:

with details.PIN I get the PIN of the selected person in the drop down. What I want to do is on button click to check if the pin entered in the text box match to details.PIN; if so, proceed to another view
I have implemented a count on the button. If the count reach to 3 and the pin entered is wrong, I need to show an error message.

The HTML for the only view I have till now

<body ng-app="customerApp">
    <div ng-controller="CustomerCtrl" align="center">    
        <select ng-model="details" ng-options="x.Name for x in customers"></select>    
        <h1>you selected {{details.Name}}</h1>
        <p>his card status is {{details.cardStatus}}</p>    
        <hr>
        <div ng-switch="details.cardStatus">
            <div ng-switch-when="0">                    
                <form name="pinForm">                     
                    <input type="password" ng-model="pin" ng-required="true"/>    
                    <p><button ng-click="pinForm.$valid && (count = count + 1)" ng-init="count=0">Proceed</button></p>
                    <p><span>Attempts left: {{3-count}}</span></p>                       
                </form>
            </div>
            <div ng-switch-when="1">
                <p>This card has been reported as stolen and will be retained. If it is yours, please contact your nearest branch</p>
            </div>
            <div ng-switch-when="2">
                <p>This card has been reported as lost and will be retained. If it is yours, please contact your nearest branch</p>
            </div>
        </div>    
    </div>
</body>
</html>

Here is the code for the API

namespace test.Controllers
{
    [RoutePrefix("Customer")]
    public class CustomerController : ApiController
    {
        [Route("CustomerRecords")]
        public List<Customer> Get()
        {
            return new List<Customer>()
            {
                new Customer { CID=1, Name="Bruce Wayne", PIN="1234", Bal=1000000, cardStatus= "0" }
                ,new Customer { CID=2, Name="Steve Rogers", PIN="2246", Bal=900000, cardStatus= "0" }
                ,new Customer { CID=3, Name="Jon Snow", PIN="2398", Bal=3000, cardStatus= "1" }
                ,new Customer { CID=4, Name="Rustin Cohle", PIN="7549", Bal=450000, cardStatus= "2" }
                //NOTE
                //cardStatus '0' :valid
                //cardStatus '1' :stolen
                //cardStatus '2' :lost
            };
        }
    }    
    public class Customer
    {
        public int CID { get; set; }
        public string Name { get; set; }
        public string PIN { get; set; }
        public int Bal { get; set; }
        public string cardStatus { get; set; }
    }
}

here's the module, the service and the factory method the code for routing the views:

var customerAppModule = angular.module("customerApp", []);    
customerAppModule.controller('CustomerCtrl', function ($scope, CustomerService)
{    
    getCustomerRecords();    
    function getCustomerRecords() {
        CustomerService.getCustomers()    
            .success(function (data) { 
                console.log(data); 
                $scope.customers = data;
            })    
            .error(function (data, status) {
                console.error('failure loading the customer record', status, data);
                $scope.customers = {};
            });    
    }
});

customerAppModule.factory('CustomerService', ['$http', function ($http) {
    var customerService = {};
    var urlBase = 'http://localhost:51701/Customer';

    customerService.getCustomers = function () {
        return $http.get(urlBase + '/CustomerRecords');
    };    
    return customerService;
}]);

var app = angular.module('routeApp', ['ngRoute']);    
app.config(function ($routeProvider) {
    $routeProvider    
        .when('/', {
            templateUrl: 'Views/Home/index.cshtml',
            controller: 'CustomerCtrl'
        })    
        .when('/MainMenu', {
            templateUrl: 'Views/Home/MainMenu.cshtml',
            controller: 'CustomerCtrl'
        })
});

I'm not sure I've written the code for the routing correctly.

Are you asking just asking how to redirect to another page in JavaScript? Because that's been answered here. It works the same in AngularJS/ASP.NET-MVC as anywhere else on the web. — Heretic Monkey
– Heretic Monkey, Commented Aug 17, 2017 at 20:40
@MikeMcCaughan i'm using the SPA concept, that's why i'm making use of ng-route — Jolan
– Jolan, Commented Aug 17, 2017 at 20:43
So, it should be clearer, in your question, what is meant by "view". Do you mean a different AngularJS view, or an MVC View? The former is handled entirely in AngularJS; the latter in ASP.NET. I would generally suggest not trying to mix the two, as you will find yourself in just these kinds of conundrums. — Heretic Monkey
– Heretic Monkey, Commented Aug 17, 2017 at 20:46

Jesus Carrasco · Accepted Answer · 2017-08-18 02:29:56Z

1

What if you change the ng-click logic, to consums a function instead an expression.

Example HTML

<body ng-controller="MainCtrl as vm">
    <select ng-model="vm.details" ng-options="x.Name for x in vm.customers">
      <option value="">Select...</option>
    </select>    
        <h1>you selected {{vm.details.Name}}</h1>
        <p>his card status is {{vm.details.cardStatus}}</p>    
        <hr>
        <div ng-switch="vm.details.cardStatus">
            <div ng-switch-when="0">                    
                <form name="vm.pinForm">                     
                    <input type="password" ng-model="vm.pin" ng-required="true"/>    
                    <p><button ng-disabled="vm.count >=3"  ng-click="vm.pinFormCheck();" ng-init="vm.count=0">Proceed</button></p>
                    <p><span>Attempts left: {{3-vm.count}}</span></p>                       
                </form>
            </div>
            <div ng-switch-when="1">
                <p>This card has been reported as stolen and will be retained. If it is yours, please contact your nearest branch</p>
            </div>
            <div ng-switch-when="2">
                <p>This card has been reported as lost and will be retained. If it is yours, please contact your nearest branch</p>
            </div>
            <div ng-if="vm.failPin">
                <p>Invalid Pin</p>
            </div>
            <div ng-if="vm.count >=3">
                <p>Not Enoguh Attempts</p>
            </div>
        </div>  
  </body>

CONTROLLER

    var vm = this;

  vm.customers = [
    {CID:1, Name:'Bruce Wayne', PIN: '1234', Bal: 10000, cardStatus: '0'},
    {CID:2, Name:'Steve Rogers', PIN: '2246', Bal: 90000, cardStatus: '0'},
    {CID:3, Name:'Jon Snow', PIN: '2398', Bal: 30000, cardStatus: '1'},
    {CID:4, Name:'Rustin Cohle', PIN: '7549', Bal: 45000, cardStatus: '2'}
  ];

  vm.pinFormCheck = function(){
    vm.count++;
    if(vm.pinForm.$valid && (vm.details.PIN === vm.pin) && (vm.count <= 2)){
      console.log('all good'); //change location.
    }else{
      vm.failPin = true;
      console.log('atemps', vm.count);
    }
  };

Working Example in this HERE

Hope this example is good enough for your UNIT CASE

edited Aug 18, 2017 at 2:29

answered Aug 17, 2017 at 20:33

Jesus Carrasco

1,3541 gold badge11 silver badges16 bronze badges

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

8 Comments

Jolan Over a year ago

your answer looks interesting, but one thing though; in your code where is the pin compared? because I also need to figure out how to do that.

Jesus Carrasco Over a year ago

in your question you dont put the logic of how pin checks. you only have the api to obtain data.

Jesus Carrasco Over a year ago

i just change the expression you have in the button to a function, to work with the validation to can call the $location an redirect to the new view.

Jesus Carrasco Over a year ago

actually you with your button the only thing doing is if have info the texbox of the pin... i dont see where you you check if the pin is valid only if click more than trhee times. show a message.

Jolan Over a year ago

but that was exactly the 1st part of my question: I don't know how to check if the pin is valid

|

Collectives™ on Stack Overflow

Proceed to another view on button click AngularJS

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related