Question

我有一个下拉列表，显示来自Web API的数据。数据如下所示

这里是下拉列表的代码

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

然后我有一个文本框和一个按钮：

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

现在我要实现两件事：

details.PIN我在下拉菜单中获得所选人员的个人识别码。我想要做的是点击按钮检查文本框中输入的图钉是否与details.PIN匹配;如果是，请转到其他视图
我已经对按钮实施了计数。如果计数达到3并且输入的引脚错误，我需要显示错误消息。

我现在唯一的视图的HTML

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

以下是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; }
    }
}

这里是模块，服务和工厂方法，用于路由视图的代码：

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'
        })
});

我不确定我是否正确编写了路由代码。

Answer 1

如果更改ng-click逻辑，则使用函数而不是表达式。

实施例的 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); } };

此HERE
中的工作示例
希望这个例子对你的UNIT CASE来说已经足够了

继续按下按钮单击AngularJS的另一个视图

1 个答案: