Question

我想在ng-change表格行的select选项中触发ng-repeat，以针对所选项目设置单价，但ng-change事件未在编辑模式下触发，这里是我的代码：

<table id="tblDetails" class="table table-striped">
    <thead>
        <tr>
            <th>Sr#.</th>
            <th class="col-md-5">Item</th>
            <th>Unit Price</th>
            <th>Qty.</th>
            <th>Cost</th>
            <th>Disc. Rate</th>
            <th>Discount </th>
            <th>Net Amount</th>
            <th class="col-md-1">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>

                <select id="s2_2" class="s2_2" ng-model="ItemCode" ng-change="getUnitPrice(ItemCode)" data-placeholder="Pick a number">

                    <option ng-repeat="c in itemList | filter:filterItem" ng-selected="{{c.Selected}}" value="{{c.Item_Code}}">{{c.Item_Name}}</option>
                </select>

            </td>
            <td>
                <input type="number" class="form-control smallInput" ng-model="UnitPrice" id="ItemPrice">
            </td>
            <td>
                <input type="number" class="form-control smallInput smallInput-sm1" ng-model="Quantity" />
            </td>
            <td>
                {{PurchaseCost =(Quantity) * (UnitPrice)}}
            </td>
            <td>
                <input type="number" class="form-control smallInput smallInput-sm1 " ng-model="DiscountRate" />

            </td>
            <td>
                {{DiscountAmount =(Quantity) * (UnitPrice) * (DiscountRate)/100}}
            </td>
            <td>
                {{LineTotal =(Quantity) * (UnitPrice) - ((Quantity) * (UnitPrice) * (DiscountRate)/100) }}
            </td>
            <td class="btn-group-xs">
                <button type="button" class="btn btn-xs btn-warning tip" data-original-title="Quick save" ng-click="addrow()" id="adds">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </td>
        </tr>

        <tr ng-repeat="item in OrderDetails">
            <td>{{$index+1}}</td>
            <td>
                <span ng-show="editMode">
                    {{item.Item_Name}}
                </span>
                <span ng-show="editMode">{{item.Item_Code}}</span>
                <select id='S_{{$index+1}}'  ng-model="ItemSelected"  ng-hide="editMode"   data-ng-change="geteditUnitPrice()" style="width: 100%">

                   <option ng-repeat="i in itemList" value="i.Item_Code">{{i.Item_Name}}</option> 
                </select>

            </td>
            <td>
                <span ng-show="editMode">{{item.Unit_Price}}</span>
                <input type="number" class="form-control height24" ng-hide="editMode" ng-model="item.Unit_Price" />
            </td>
            <td>
                <span ng-show="editMode">{{item.Quantity}}</span>
                <input type="number" class="form-control height24" ng-hide="editMode" ng-model="item.Quantity" />
            </td>
            <td>
                {{item.Purchase_Cost =(item.Quantity) * (item.Unit_Price)}}

            </td>
            <td>
                <span ng-show="editMode">{{item.Discount_Rate}}</span>
                <input type="number" class="form-control height24" ng-hide="editMode" ng-model="item.Discount_Rate" />
            </td>
            <td>
                {{item.Discount_Amount =(item.Quantity) * (item.Unit_Price) * (item.Discount_Rate)/100}}
            </td>
            <td>
                {{item.Total_Amount =(item.Quantity) * (item.Unit_Price) - ((item.Quantity) * (item.Unit_Price) * (item.Discount_Rate)/100) }}
            </td>
            <td>
                <div class="btn-group-xs">
                    <button class="btn btn-xs btn-warning tip" data-original-title="Hide" type="button"  ng-show="editMode" ng-click="editMode = false; editItem(item)" id="edit">
                        <span class="glyphicon glyphicon-edit"></span>
                    </button>

                    <button class="btn btn-xs btn-warning" data-original-title="Quick save" type="button"  ng-hide="editMode" ng-click="editMode = true" id="update">
                        <span class="glyphicon glyphicon-ok"></span>

                    </button>
                    <button class="btn btn-xs btn-danger" data-original-title="Delete user" type="button"  value="Delete" ng-click="removeItem($index)" id="remove">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </div>
            </td>
        </tr>

    </tbody>
</table>`

Answer 1

使用ng-repeat时必须使用 ng-options ，这是简短的演练 https://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

如果仍然存在任何混淆，请查看并告诉我。

在ng-repeat表行angularjs中选择选项中的ng ng-change

1 个答案: