输入名称未从{{}}插值到该值

时间:2017-01-23 16:25:13

标签: javascript html angularjs input angularjs-ng-repeat

Below is the attached picture of the form constructor. As you can see it has {{service.name}} in it instead o fthe name itself. 我有一个表单,我有两个ng-repeats,上面有自定义过滤器,里面有一个输入字段。我试图通过添加索引或使用html响应中的字段为输入字段指定唯一名称。无论如何,当我有name="{{customitem.name}}"name="{{$index}}"时,表单会生成一个{{customitem}}{{$index}}的构造函数,而不是它自己的值。此表单也会使用ng-if打开和关闭。

<form name="selectServiceForm">
                <div data-ng-show="showAddServices">
                    <section class="content-header">
                        <div class="row">
                            <div class="col-lg-5 col-sm-5">
                                <h1>
                                    Services
                                    <small>Add or Modify Services</small>
                                </h1>
                            </div>
                            <div class="col-lg-7 col-sm-7 text-right btn-container">
                                <button type="button" class="btn btn-primary btn-sm" data-ng-disabled="selectServiceForm.$invalid" data-ng-click="selectServiceForm.$valid && save(true)">
                                    <i class=" fa fa-save"></i>
                                    <span class="indent-xs">Save</span>
                                </button>
                                <button type="button" class="btn btn-primary btn-sm" data-ng-click="backToAddServices()">
                                    <i class=" fa fa-arrow-circle-left"></i>
                                    <span class="indent-xs">BACK</span>
                                </button>
                            </div>
                        </div>
                    </section>
                    <section class="content group-container">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="">Industry<sup style="color: red">*</sup></label>
                                    <select class="form-control" id="select1" name="" data-ng-model="selectedIndustry" data-ng-change="onChangeIndustry(selectedIndustry)"
                                            data-ng-options="industry.CategoryName for industry in Industry">
                                        <option value="">Select Industry</option>
                                    </select>
                                </div>
                                <div data-ng-show="isSecondLevelCategory">
                                    <div class="form-group">
                                        <label for="">
                                            Category<sup style="color: red">*</sup>
                                        </label>

                                        <select class="form-control" id="selectCategory" name="" data-ng-model="selectedService" data-ng-change="showServices(selectedService)"
                                                data-ng-options="service.CategoryName for service in ServiceTypes">
                                            <option value="">Select Category</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="selectServ">
                            <div class="pad20B  p-relative">

                                <div data-ng-repeat="item in innerCategoryList | orderBy: 'SortOrder'" class="">
                                    <div class="form-row pad10B mrg0A pad0B mrg5T">
                                        <label>
                                            <input class="wauto float-left mrg5R" type="checkbox" data-ng-model="item.checked" data-ng-checked="item.checked" data-ng-click="categorySelected(item)" />
                                            <strong class="float-left">{{item.CategoryName}}</strong>
                                        </label>
                                    </div>
                                    <div data-ng-show="item.checked" style="padding-left: 25px" class="pad15L">
                                        <div data-ng-repeat="service in serviceList | servicelistfilter:item.ShortName | orderBy: 'SortOrder' ">
                                            <div class="form-row  mrg0A pad10B">
                                                <div class="row">
                                                    <div class="col-lg-8 col-md-6 col-sm-6">
                                                        <div class="service-amount-label pad5L mrg5T">
                                                            <label>
                                                                <input class="wauto float-left mrg5R" type="checkbox" data-ng-model="service.checked"
                                                                       data-ng-checked="service.checked" data-ng-click="selectService(service)" />
                                                                <strong class="float-left">{{service.Name}}</strong>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <!--TAP-4394
                                            <div class="col-lg-4 col-md-6 col-sm-6">
                                                <div class="service-amount float-right" data-ng-show="service.checked && !service.hideRange">

                                                    <input type="text" placeholder="$50" data-ng-model="featureDetail.minAmount" name="minAmount" data-ng-required="featureDetail.isSelected">
                                                    <span class="mrg5R mrg5T">$</span>
                                                    <decimal-text-box class="mrg5R" max-value="service.MaxAmount" min-value="'invalid'" min-max-error="service.minMaxError" input-placeholder="'$min'" input-class="'selectService'" input-value="service.MinAmount"></decimal-text-box>
                                                    <span class="dash mrg5R mrg5T">&ndash;</span>
                                                    <span class=" mrg5R mrg5T">$</span>
                                                    <decimal-text-box class=" " max-value="'invalid'" min-value='service.MinAmount' min-max-error="service.minMaxError" input-placeholder="'$max'" input-class="'selectService'" input-value="service.MaxAmount"></decimal-text-box>
                                                    <div data-ng-show="service.checked &&  !service.hideRange" class="new-error-style">
                                                        <span data-ng-show="service.minMaxError" class="font-white">min should not be greater than max</span>
                                                    </div>
                                                </div>

                                            </div>-->
                                                    <!-- <div class="col-lg-5">
                                                <div data-ng-show="service.checked &&  !service.hideRange">
                                                    <span data-ng-show="service.minMaxError" class="font-red">min should not be greater than max</span>
                                                </div>
                                            </div>-->
                                                </div>


                                            </div>
                                            <div class="form-row pad10B mrg0A service-custom-text"
                                                 data-ng-repeat="customitem in customServiceList | listfilter:service.ShortName "
                                                 data-ng-show="service.checked" data-ng-model="customServiceList" ng-init="">
                                                <!--data-ng-click="showEditCustomService(customSvc.CustomText,customSvc.Amount)"-->
                                                <div class="col-md-5 col-sm-5">
                                                    <span class="pad0L pointer" data-ng-click="removeCustomService(service,customitem.Id)"><i class="fa fa-fw fa-minus-circle"></i></span>
                                                    <input type="text" data-ng-model="customitem.CustomText" placeholder="Custom Service" class="selectService w40 mrg5Bxs" />

                                                    <span class="mrg20L">
                                                        <decimal-text-box min-value="'invalid'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'Amount'" input-class="'selectService w40 '" input-value="customitem.Amount"></decimal-text-box>
                                                    </span>
                                                    <textarea class="selectDescription" cols='60' rows='8' data-ng-model="customitem.CustomDescription" placeholder="Description (Optional)"></textarea>
                                                </div>
                                                <div ng-hide="businessModel.name == 'Book Now'">
                                                    <div class="center-bor" style="height: 231px;"></div>
                                                    <div class="float-left col-md-5 col-sm-5 activate-bundle-container gray">
                                                        <div class="activate-bundle-button" ng-hide="customitem.CustomServiceBundle && !customitem.isDeleteBundle" ng-click="activateBundle(customitem)">Activate Bundle Rates</div>
                                                        <div ng-show="customitem.CustomServiceBundle && !customitem.isDeleteBundle">
                                                            <div class="cancel-bundle-button" ng-click="cancelBundle(customitem)">Cancel</div>
                                                            <input name="customBundleQuantity" type="number" class="selectService mrg70T" placeholder="# of Bundles" ng-model="customitem.CustomServiceBundle.BundleQuantity" ng-change="change(customitem.CustomServiceBundle.BundleQuantity, customitem)" />
                                                            <div class="font-red" ng-if="selectServiceForm.customBundleQuantity.$error.pattern">Quantiy must be more than 1.</div>
                                                            <input type="number" step="0.5" name="{{service.name}}"
                                                                   class="selectService mrg20T" placeholder="Price (per Unit)"
                                                                   ng-model="customitem.CustomServiceBundle.BundlePrice"
                                                                   ng-change="change(customitem.CustomServiceBundle.BundlePrice, customitem)" compare-price price-to-compare="customitem.Amount" />
                                                            <div class="font-red" ng-if="selectServiceForm.customBundlePrice.$error.priceValid">Bundle Price must be less than Original Price..</div>
                                                            <!--<decimal-text-box min-value="'2'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'# of Bundles'" input-class="'selectService mrg70T'" input-value="customitem.CustomServiceBundle.BundleQuantity" change="Change"></decimal-text-box>-->
                                                            <!--<decimal-text-box min-value="'1'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'Price'" input-class="'selectService mrg20T'" input-value="customitem.CustomServiceBundle.BundlePrice"></decimal-text-box>-->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-9">
                                                    <div class="custom-service" data-ng-show="service.checked">
                                                        <div class="pad10B pad0T pad0L">
                                                            <a href="javascript:void(0);" class="text-color" data-ng-click="addCustomService(service,item)"><i class="fa fa-fw fa-plus-circle"></i>Add a Service</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <!--End of selectServiceForm-->
                        </div>
                    </section>
                </div>
            </form>

我的项目正在使用Angular v1.3.15,我知道它是一个旧版本,但从这个版本向前跳过太多了。

0 个答案:

没有答案