0
Web APIからのデータを表示するドロップダウンがあります。ボタンクリックで別のビューに進むAngularJS
<input type="password" ng-model="pin" ng-required="true"/>
<button ng-click="pinForm.$valid && (count = count + 1)" ng-init="count=0">Proceed</button>
は今、2つのことがあります：データが
下に表示され、ここで
<select ng-model="details" ng-options="x.Name for x in customers"></select>
ドロップダウンのためのコードを、私は、テキストボックスとボタンを持っているのです私は実装したい：
- と
details.PINドロップダウンで選択した人物のPINを取得します。私がしたいのは、ボタンをクリックして、テキストボックスに入力されたピンがdetails.PINに一致するかどうかをチェックすることです。もしそうなら、別のビューに進みます。 - ボタンにカウントを実装しました。カウントが3に達し、入力されたピンが間違っている場合は、エラーメッセージを表示する必要があります。
今
<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>
ここまで私が持っている唯一のビューのための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'
})
});
私はwriを確認していませんルーティングのコードを正しく修正してください。
今までに行ったコードを共有してください –
@NarenMurali編集後の投稿者を確認してください – jo12345678
JavaScriptの別のページにリダイレクトする方法を尋ねていますか？それは答えられているので[こちら]（https://stackoverflow.com/q/503093/215552）。 AngularJS/ASP.NET-MVCでもWeb上の他の場所と同じように動作します。 –