AngularJS中如何通过if条件控制日期字段的可编辑状态

嘿，作为AngularJS新手，你的需求其实很好实现，咱们结合你现有的代码来调整就行～

首先，我们需要一个变量来记录商品添加的次数，这样才能区分首次和第二次添加。然后把这个计数和你现有的商品代码判断逻辑结合，来控制日期字段的可编辑状态。

步骤1：在控制器里初始化必要的变量 #

先在你的AngularJS控制器里添加两个变量：一个记录添加次数，一个控制日期是否可编辑：

// 初始化商品添加次数，默认0次（还没添加）
$scope.addCount = 0;
// 默认日期字段可编辑
$scope.isDateEditable = true;

步骤2：修改现有条件逻辑，加入日期控制 #

把你现有的判断逻辑调整一下，结合添加次数来控制日期的可编辑状态。同时建议把这段逻辑封装成函数，方便在添加商品的时候调用：

// 封装判断逻辑，方便重复调用
function updateCartControls() {
    if($scope.supplierChooserObject.commodityCode != "5215"){ 
        $scope.isLimitOrderObject.showCheckbox = false; 
        isLimitOrderObject=false; 
        // 如果你希望非5215商品的日期一直不可编辑，可以加上下面这句
        // $scope.isDateEditable = false;
    }else{ 
        $scope.isLimitOrderObject.showCheckbox = true; 
        isLimitOrderObject=true; 
        // 核心逻辑：首次添加（次数小于2）时日期可编辑，第二次及以后不可编辑
        $scope.isDateEditable = $scope.addCount < 2;
    }
}

步骤3：在添加商品的函数里更新计数并调用控制逻辑 #

找到你处理“添加商品到购物车”的函数，每次添加时先增加计数，再调用上面的控制函数：

$scope.addToCart = function() {
    // 每次添加商品，计数加1
    $scope.addCount++;
    // 执行你的商品添加逻辑（比如把商品加入购物车数组等）
    // ... 你的其他添加代码 ...
    // 更新复选框和日期的状态
    updateCartControls();
};

步骤4：修改HTML，绑定日期可编辑状态 #

把HTML里的editable="true"改成绑定我们的isDateEditable变量，这样就能动态控制编辑状态了：

<li class="adhoc-form-end-date adhoc-form-input-section"> 
    <field class="col-xs-12" ng-model="endDateObject2" editable="{{isDateEditable}}"> 
    </field> 
</li>

逻辑说明 #

• 首次点击添加商品时，addCount变成1，此时addCount < 2为true，日期字段保持可编辑，同时符合商品代码5215的话，复选框也会启用。
• 第二次点击添加时，addCount变成2，addCount < 2为false，日期字段就会变成不可编辑状态。

这样就完美实现你要的需求啦～

内容的提问来源于stack exchange，提问作者Shri Raksha Dk