1

私はAngularが初めてなので、質問がうまくいかない場合は申し訳ありません。良い解決策と標準的な解決策に進むのを手伝ってください。

ここに私のhtmlフォームがあります

<form ng-class="{'submitted': submitted}" name ="mybook" accept-charset="UTF-8" ng-submit="add_items()">
<div class="form-group">
    <label for="title-page">Title</label>
    <div class="col-sm-3">
          <md-select ng-model='title_page'>
            <md-option ng-repeat = "option in respons" ng-value = "{{option}}">{{option.name}}</md-option>
          </md-select>
    </div>
    <label for="type-page">Type_page</label>
    <div class="col-sm-3">
          <md-select ng-model='type_page'>
            <md-option ng-repeat = "option in responding" ng-value = "{{option}}">{{option.type_name}}</md-option>
          </md-select>
    </div>
    <label for="amount-page">Number Of Pages</label>

    <div class="col-sm-2">
        <input type="text" ng-model="amount_page" required />
    </div>
    <div class="col-sm-3">
        <button ng-click="submitted= true;" class="btn btn-primary">
            <i class="material-icons">add</i> Add
        </button>
    </div>
</div>
</form>

ここに私のコントローラーがあります

$scope.add_items = function(){
    if($scope.mybook.$valid) {
        $scope.table_list_book.push({'nums':$scope.count_rows,'title':$scope.title_page.name,'type_name':$scope.type_page.type_name, 'page_num': $scope.amount_page});
        $scope.title_page.disabled = true; // i do like this to disable but not work

        //one more to stop user select old data on `type_page` but i no idea to do it
    }
}

私が欲しい：

  • 私のフォームが初めて送信されたとき、title_page無効になっています（ユーザーは2番目または3番目に変更できません..時間以上）

  • また、もう 1 人のtype_pageユーザーが、送信準備完了の以前のデータと同じものを選択することはできません。

注：ページを更新するのではなく、リストをテーブルに追加するためにAjaxを実行します。

どんなアイデアでも助けてくれてありがとう。

4

2 に答える 2

0

次のようにtitle_pageに使用ng-disabledします。

HTML

<form ng-class="{'submitted': submitted}" name ="mybook" accept-charset="UTF-8" ng-submit="add_items()">
<div class="form-group">
    <label for="title-page">Title</label>
    <div class="col-sm-3">
          <md-select ng-model='title_page' ng-disabled="isSubmited">
            <md-option ng-repeat = "option in respons" ng-value = "{{option}}">{{option.name}}</md-option>
          </md-select>
    </div>
    <label for="type-page">Type_page</label>
    <div class="col-sm-3">
          <md-select ng-model='type_page'>
            <md-option ng-repeat = "option in responding" ng-value = "{{option}}">{{option.type_name}}</md-option>
          </md-select>
    </div>
    <label for="amount-page">Number Of Pages</label>

    <div class="col-sm-2">
        <input type="text" ng-model="amount_page" required />
    </div>
    <div class="col-sm-3">
        <button ng-click="submitted= true;" class="btn btn-primary">
            <i class="material-icons">add</i> Add
        </button>
    </div>
</div>
</form>

コントローラ

ドロップダウン オプション リストから以前に選択した値を拒否するには、 underscore.jsを使用 します。

$scope.add_items = function(){
if($scope.mybook.$valid) {
    // do your stuff

    $scope.isSubmited = true;// this code will make your `title_page` disabled after first time submission
    $scope.responding = _.reject($scope.responding, function(obj){ return obj.id == $scope.type_page.id}); // this will reject the previously submitted value from dropdown option array
}}

配列からのこの種の拒否は、リダイレクトが発生しなかった場合にのみ機能します。ページがリロードされるたびに、ドロップダウン配列が初期値としてリロードされます。

于 2018-03-21T07:29:39.967 に答える