jo12345678 jo12345678 - 2 months ago 22
AngularJS Question

Proceed to another view on button click AngularJS

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

enter image description here

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:


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

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

Answer Source

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