Afficher l'élément basé sur la valeur de la variable $scope
Question
Je suis nouveau sur AngularJS et j'essaie de comprendre comment afficher un élément HTML basé sur une valeur variable.
J'ai essayé ceci:
<div id="checkoutForm" class="form" ng-show="$scope.matchCount==1">
</div>
et ça:
<div id="checkoutForm" class="form" ng-show="matchCount==1">
</div>
Voici mon code jusqu'à présent :
<div id="visitorForm" class="form" ng-controller="VisitorLogController">
<input id="firstNameTb" ng-model="formData.FIRSTNAME" placeholder="@Model.FirstNameStr" ng-blur="findUser()" class="form-control" value="{{FIRSTNAME}}"/>
<input id="lastNameTb" ng-model="formData.LASTNAME" placeholder="@Model.LastNameStr" ng-blur="findUser()" class="form-control" value="{{LASTNAME}}" />
<input id="companyTb" ng-model="formData.COMPANYNAME" placeholder="@Model.CompanyStr" ng-blur="findUser()" class="form-control" value="{{COMPANYNAME}}" />
<input id="codeTb" ng-model="formData.CHECKCODE" placeholder="@Model.CodeString" title="@Model.CodeStringDesc" ng-blur="findUser()" class="form-control" />
</div>
<div id="checkoutForm" class="form" ng-show="matchCount==1">
<h3>@Html.Raw(@Model.RecordFoundStr)</h3>
</div>
Et dans mon fichier .js :
function VisitorLogController($scope, $http) {
$scope.matchCount = null;
$scope.findUser = function () {
$http({
method: 'POST',
url: rootUrl + "VisitorLog/Check",
data: $.param($scope.formData),
headers: { 'Content-type': 'application/x-www-form-urlencoded' }
}).success(function (data) {
$scope.matchCount = data.count;
if (data.count == 1) {
$scope.FIRSTNAME = data.visitors[0].FirstName;
$scope.LASTNAME = data.visitors[0].LastName;
$scope.COMPANYNAME = data.visitors[0].CompanyName;
}
$scope.message = data.message;
});
}
}
La fonction se déclenche comme prévu et je peux voir le décompte et vérifier que $scope.matchCount est correctement mis à jour avec le nombre d'enregistrements, mais cela n'affecte pas du tout l'interface utilisateur.
Qu'est-ce que je rate?
La solution
Le div
avec ng-show="matchCount==1"
est en dehors du scope
de VisitorLogController
.
Déplacer le ng-show
au sein de scope
devrait le faire fonctionner.
<div ng-controller="VisitorLogController">
<div id="visitorForm" class="form">
<input id="firstNameTb" ng-model="formData.FIRSTNAME" placeholder="@Model.FirstNameStr" ng-blur="findUser()" class="form-control" value="{{FIRSTNAME}}"/>
<input id="lastNameTb" ng-model="formData.LASTNAME" placeholder="@Model.LastNameStr" ng-blur="findUser()" class="form-control" value="{{LASTNAME}}" />
<input id="companyTb" ng-model="formData.COMPANYNAME" placeholder="@Model.CompanyStr" ng-blur="findUser()" class="form-control" value="{{COMPANYNAME}}" />
<input id="codeTb" ng-model="formData.CHECKCODE" placeholder="@Model.CodeString" title="@Model.CodeStringDesc" ng-blur="findUser()" class="form-control" />
</div>
<div id="checkoutForm" class="form" ng-show="matchCount==1">
<h3>@Html.Raw(@Model.RecordFoundStr)</h3>
</div>
</div>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow