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](https://stackoverflow.com/q/503093/215552). It works the same in AngularJS/ASP.NET-MVC as anywhere else on the web. — Heretic Monkey, Aug 17 '17 at 20:40
@MikeMcCaughan i'm using the SPA concept, that's why i'm making use of `ng-route` — Jolan, Aug 17 '17 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, Aug 17 '17 at 20:46

Jesus Carrasco · Accepted Answer · 2017-08-18T02:29:56.893

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

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. — Jolan, Aug 17 '17 at 20:45
in your question you dont put the logic of how pin checks. you only have the api to obtain data. — Jesus Carrasco, Aug 17 '17 at 20:47
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, Aug 17 '17 at 20:49
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. — Jesus Carrasco, Aug 17 '17 at 20:50
but that was exactly the 1st part of my question: I don't know how to check if the pin is valid — Jolan, Aug 17 '17 at 20:52
i update th answer adding `$scope.details.pin === $scope.pin` im guessing details have those attr if not change for the one. hope this help — Jesus Carrasco, Aug 17 '17 at 20:59
it's not working. When I click on the button, it just reset the drop down regardless whether I entered a correct pin or not — Jolan, Aug 17 '17 at 22:55

Proceed to another view on button click AngularJS

1 Answers1