Question

我正在我的网站上创建一个小型价格计算器，用户可以选择他需要的服务。当他选择他的服务时，价格会相应更新。

角

$scope.price = 0;

HTML

<h4> What features would you like? </h4>
    <input type="checkbox" value="feature 1" ng-checked="price = price + 5">
    <input type="checkbox" value="feature 2" ng-checked="price = price + 25">
    <input type="checkbox" value="feature 3" ng-checked="price = price + 50">


<h4> Would you like your project to include X? </h4>
    <input type="radio" name="feature" value="yes" ng-checked="price = price + 10">
    <input type="radio" name="feature" value="no" selected>

<h5> We think your project will cost around ${{price}} </h5>

从示例中可以看出，一旦用户单击某个选项，它就会向price变量添加一个值，但如果取消选择则会取消该值。 Ng-checked不起作用。我怎么能这样做？

谢谢！

Answer 1

我建议设置一个不同的模型。试图在检查/未检查状态下跟踪价格将很困难。

角

$scope.product = {
    price: 0,
    feature: {
        price: 10
        checked: false
    },
    feature1: {
        price: 5
        checked: false
    },
    feature2: {
        price: 25
        checked: false
    },
    feature3: {
        price: 50
        checked: false
    }
};

$scope.getPrice = function(feature_id){
    var feature = $scope.product[feature_id];
    return feature.checked ? feature.price : 0;
};

$scope.updatePrice = function(){
    $scope.product.price = $scope.getPrice('feature')
        + $scope.getPrice('feature1')
        + $scope.getPrice('feature2')
        + $scope.getPrice('feature3');
};

HTML

<h4> What features would you like? </h4>
<input type="checkbox" name="feature1" ng-model="product.feature1.checked" ng-clicked="updatePrice()">
<input type="checkbox" name="feature1" ng-model="product.feature2.checked" ng-clicked="updatePrice()">
<input type="checkbox" name="feature1" ng-model="product.feature3.checked" ng-clicked="updatePrice()">


<h4> Would you like your project to include X? </h4>
<input type="radio" name="feature" ng-value="true" ng-model="product.feature.checked" ng-clicked="updatePrice()">
<input type="radio" name="feature" ng-value="false" ng-model="product.feature.checked" ng-clicked="updatePrice()">

<h5> We think your project will cost around ${{product.price}} </h5>

Answer 2

使用ng-true-value和ng-false-value代替ng-checked。

ngTrueValue：选中时应设置表达式的值。

ngFalseValue：表达式的值   未选中时应设置。

Answer 3

你可以处理working plnkr

<div class="search"> <span class="search_icon"></span> </div> .search { width:100px; height:100px; background: #3a3a3a; transition: all 0.4s ease; margin:50px; position:absolute; &.open { width: 90%; } } .search_icon { width: 34px; height: 34px; border-radius: 40px; border: 3px solid red; display: block; position: relative; margin:22px; transition: all .3s ease; &:before { content: ''; width: 3px; height: 15px; position: absolute; right: -2px; top: 30px; display: block; background-color: red; transform: rotate(-45deg); transition: all .3s ease; } &:after { content: ''; width: 3px; height: 15px; position: absolute; right: -12px; top: 40px; display: block; background-color: red; transform: rotate(-45deg); transition: all .3s ease; } .open & { width: 50px; height: 50px; border-radius: 60px; margin-left:95%; &:before { transform: rotate(45deg); right: 23px; top: 12px; height: 29px; } &:after { transform: rotate(-45deg); right: 23px; top: 12px; height: 29px; } } } $(function() { $('.search_icon').on('click', function() { $('.search').toggleClass('open clicked'); }); });用于指示是否已对其进行检查以使其无效。 ng-checked也不应与ng-checked一起使用。我们使用了纯ng模型。

ng-model

在控制器中

  <h4> What features would you like? </h4>
    <label>Feature 1 <input type="checkbox" value="true" ng-model="features.feature1" /></label><br>
    <label>Feature 2 <input type="checkbox" value="true" ng-model="features.feature2" /></label><br>
    <label>Feature 3 <input type="checkbox" value="true" ng-model="features.feature3" /></label><br>
 <h4> Would you like your project to include X? </h4>
    <label> FeatureX</label>
    <input type="radio" name="feature" ng-value="true" ng-model="features.featureX" />
    <input type="radio" name="feature" ng-value="false" ng-model="features.featureX" />
 <h5> We think your project will cost around ${{ calculatePrice() }} </h5>

选中输入框时增加Angular变量

3 个答案:

角

HTML