AngularJS case à cocher ng dynamique-expression de la valeur vraie
j'essaie de construire une calculatrice pour les prix de la garderie en angle.
chaque emplacement dans la franchise de la société a des prix séparés pour chaque jour. Donc mon idée était de construire un formulaire, avec d'abord un select qui vous permet de sélectionner l'emplacement, puis une série de cases à cocher pour les jours.
j'ai des problèmes avec ng-true-value dans les cases à cocher en sélectionnant les bons prix à partir de mon fichier json.
mise à jour: Plunkr Ajouté: http://plnkr.co/edit/MDmrqaH1VzLBzjd5eHgT?p=preview
réfléchir à ce code:
<p class="kind_section">Choose location</p>
<select ng-model="formData.location" ng-options="location.title for location in data.bso"></select>
<p class="kind_section">Select days</p>
<input type="checkbox" ng-model="location.day.mon" ng-change="calculatePrice()" ng-true-value="{{data.bso[formData.location.ID].prices.monday}}" ng-false-value="0">Ma
<input type="checkbox" ng-model="location.day.tue" ng-change="calculatePrice()" ng-true-value="{{data.bso[formData.location.ID].prices.tuesday}}" ng-false-value="0">Di<br />
<input type="checkbox" ng-model="location.day.wed" ng-change="calculatePrice()" ng-true-value="{{data.bso[formData.location.ID].prices.wednesday}}" ng-false-value="0">Wo
<input type="checkbox" ng-model="location.day.thu" ng-change="calculatePrice()" ng-true-value="{{data.bso[formData.location.ID].prices.thursday}}" ng-false-value="0">Do<br />
<input type="checkbox" ng-model="location.day.fri" ng-change="calculatePrice()" ng-true-value="{{data.bso[formData.location.ID].prices.friday}}" ng-false-value="0">Vr
tout d'abord le select définit formData avec un ID de localisation, puis je veux utiliser cet ID pour sélectionner les prix de jour pour l'emplacement correspondant et les mettre à ng-true-valeur.
j'utilise ng-true-value="{{data.bso[formData.location.ID].prices.monday}}" pour cela. Cela ne fonctionne pas.
quand je règle l'ID manuellement comme ng-true-value="{{data.bso[0].prices.monday}}" ça fonctionne. Pourquoi le résultat du select n'est-il pas repris par ng-vrai-valeur?
Ceci est mon fichier json:
$scope.data = {
"bso": [
{
"ID": 0,
"title": "Locatie 1",
"prices": {
"monday": 130,
"tuesday": 130,
"wednesday": 200,
"thursday":130,
"friday": 130
}
},
{
"ID": 1,
"title": "Locatie 2",
"prices": {
"monday": 430,
"tuesday": 530,
"wednesday": 600,
"thursday":990,
"friday": 730
}
}
]
};
3 réponses
il semble ng-true-value n'accepte pas les expressions non constantes. À partir de la docs(v1.3.0)--7-->:
certains attributs utilisés en conjonction avec ngModel (comme ngTrueValue ou ngFalseValue) n'accepteront que les expressions constantes.
exemples d'expressions constantes:
<input type="checkbox" ng-model="..." ng-true-value="'truthyValue'">
<input type="checkbox" ng-model="..." ng-false-value="0">
exemples d'expressions non constantes:
<input type="checkbox" ng-model="..." ng-true-value="someValue">
<input type="checkbox" ng-model="..." ng-false-value="{foo: someScopeValue}">
un contournement idéal probablement appellerait une méthode de Controller sur ng-click ou ng-change à l'intérieur de laquelle vous pouvez analyser toutes les cases à cocher pour truthy ou non truthy valeurs.
L'Expression dans la valeur ng-true-ne sera évaluée qu'une seule fois, donc elle ne sera pas dynamique.
une approche alternative consiste à calculer les valeurs dans la fonction de rappel ng-change à la place.
s'il vous Plaît voir ma fourchette http://plnkr.co/edit/9zYS3OZ0sSkXX9rHwcgv?p=preview pour l'exemple complet.
Dans le html:
<input type="checkbox" ng-model="selectedDays.monday" ng-change="calculatePrice()" /> Mon
<input type="checkbox" ng-model="selectedDays.tuesday" ng-change="calculatePrice()" /> Tue <br />
<input type="checkbox" ng-model="selectedDays.wednesday" ng-change="calculatePrice()" /> Wed
<input type="checkbox" ng-model="selectedDays.thursday" ng-change="calculatePrice()" /> Thu <br />
<input type="checkbox" ng-model="selectedDays.friday" ng-change="calculatePrice()" /> Fri
et dans le contrôleur:
$scope.calculatePrice = function(){
$scope.formData.location.day = {};
angular.forEach($scope.selectedDays, function (selected, day) {
if (selected) {
$scope.formData.location.day[day.slice(0, 3)] = $scope.data.bso[$scope.formData.location.ID].prices[day];
}
});
}
$scope.selectedDays = {};
une autre approche consiste à retarder la création de la case à cocher jusqu'à ce que la valeur soit prête (sur scope ou autre).
dans mon cas, je chargeais une valeur via http qui n'était pas sur la portée lorsque la case à cocher a été créée. Donc je l'ai juste enveloppé dans un ng-if.
<div class="checkbox" ng-if="viewData.conditionId != undefined">
<label>
<input type="checkbox" ng-true-value="{{'\''+ viewData.conditionId + '\''}}" ng-false-value="undefined" ng-model="model.conditionId" required />
I agree
</label>
</div>
ce qui a parfaitement fonctionné pour mon scénario. Le vôtre est un peu différent mais le même principe devrait s'appliquer-reportez la création de la case à cocher jusqu'à ce que vous la valeur étant liée est y.
et oui les stupides guillemets semblent nécessaires.