代码之家  ›  专栏  ›  技术社区  ›  BT101

将验证范围附加到正确的输入

  •  0
  • BT101  · 技术社区  · 6 年前

    我在循环中显示输入。对于每一个,我想附上三个跨度,分别是“必需的”、“太短的”、“太长的”。我是这样做的:

    <form name="sellItem">
    <div data-ng-repeat="n in langInput.values" style="margin-top: 100px; background: white; color: white">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 u-no-padding">
            <label class="sell__label" for="auction_name_account_{{n.selected}}">Główna nazwa Twojej aukcji ({{n.selected }}):</label>
            <div>
                <input type="text"
                       id="auction_name_account_{{n.selected}}"
                       class="form-control"
                       name="auction_name_account[$index]"
                       data-ng-model="inputs.auction_name_account[$index]"
                       data-ng-minlength="10"
                       data-ng-maxlength="60"
                       required />
                <span class="sell__input-text sell__input-text--big-input"
                      data-ng-show="sellItem.auction_name_account[$index].$error.required">Wymagane!</span>
                <span class="sell__input-text sell__input-text--big-input"
                      data-ng-show="sellItem.auction_name_account[$index].$error.minlength">Za krótkie!</span>
                <span class="sell__input-text sell__input-text--big-input"
                      data-ng-show="sellItem.auction_name_account[$index].$error.maxlength">Za długie!</span>
                {{ inputs }}
            </div>
        </div>
    </div>
    </form>
    

    但跨度根本不显示。我循环使用的值是:

    $scope.langInput = {
            values: [
                {
                    id: "1",
                    selected: "pl"
                },
                {
                    id: "2",
                    selected: "eng"
                }
            ],
    

    我还在初始化数组

        $scope.inputs = {
            auction_name_account: []
        };
    

    确保ng模型的独特性。

    如何将验证范围附加到正确的输入?现在就像我说的,跨度根本没有显示出来。

    1 回复  |  直到 6 年前
        1
  •  1
  •   georgeawg    6 年前

    这个 name 的属性 <input> 需要使用插值, {{ }} :

    <form name="sellItem">
    <div data-ng-repeat="n in langInput.values" style="margin-top: 100px; background: white; color: white">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 u-no-padding">
            <label class="sell__label" for="auction_name_account_{{n.selected}}">Główna nazwa Twojej aukcji ({{n.selected }}):</label>
            <div>
                <input type="text"
                       id="auction_name_account_{{n.selected}}"
                       class="form-control"
                       ̶n̶a̶m̶e̶=̶"̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶a̶c̶c̶o̶u̶n̶t̶[̶$̶i̶n̶d̶e̶x̶]̶"̶
                       name="auction_name_account_{{$index}}"
                       data-ng-model="inputs.auction_name_account[$index]"
                       data-ng-minlength="10"
                       data-ng-maxlength="60"
                       required />
                <span class="sell__input-text sell__input-text--big-input"
                      ̶d̶a̶t̶a̶-̶n̶g̶-̶s̶h̶o̶w̶=̶"̶s̶e̶l̶l̶I̶t̶e̶m̶.̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶a̶c̶c̶o̶u̶n̶t̶[̶$̶i̶n̶d̶e̶x̶]̶.̶$̶e̶r̶r̶o̶r̶.̶r̶e̶q̶u̶i̶r̶e̶d̶"̶>̶W̶y̶m̶a̶g̶a̶n̶e̶!̶<̶/̶s̶p̶a̶n̶>̶
                      data-ng-show="sellItem['auction_name_account_'+$index].$error.required">Wymagane!</span>
                <span class="sell__input-text sell__input-text--big-input"
                      ̶d̶a̶t̶a̶-̶n̶g̶-̶s̶h̶o̶w̶=̶"̶s̶e̶l̶l̶I̶t̶e̶m̶.̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶a̶c̶c̶o̶u̶n̶t̶[̶$̶i̶n̶d̶e̶x̶]̶.̶$̶e̶r̶r̶o̶r̶.̶m̶i̶n̶l̶e̶n̶g̶t̶h̶"̶>̶Z̶a̶ ̶k̶r̶ó̶t̶k̶i̶e̶!̶<̶/̶s̶p̶a̶n̶>̶
                      data-ng-show="sellItem['auction_name_account_'+$index].$error.minlength">Za krótkie!</span>
                <span class="sell__input-text sell__input-text--big-input"
                      ̶d̶a̶t̶a̶-̶n̶g̶-̶s̶h̶o̶w̶=̶"̶s̶e̶l̶l̶I̶t̶e̶m̶.̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶a̶c̶c̶o̶u̶n̶t̶[̶$̶i̶n̶d̶e̶x̶]̶.$̶e̶r̶r̶o̶r̶.̶m̶a̶x̶l̶e̶n̶g̶t̶h̶"̶>̶Z̶a̶ ̶d̶ł̶u̶g̶i̶e̶!̶<̶/̶s̶p̶a̶n̶>̶                    
                      data-ng-show="sellItem['auction_name_account_'+$index].$error.maxlength">Za długie</span>
                {{ inputs }}
            </div>
        </div>
    </div>
    </form>
    

    这个 ng-show 指令采用无插值的角度表达式。