angularjs 1 如何在提交表单有效后禁用选择选项

Question

很抱歉，如果我的问题不是很好，因为我是角度方面的新手，请帮助我找到好的解决方案和标准解决方案。

这是我的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 禁用（用户不能在第二次或第三次更改它，.. 时间更多）

• 还有一个type_page用户无法选择与之前准备好的数据相同的提交。

注意：我使用 Ajax 将列表添加到表格而不是刷新页面。

感谢任何想法的帮助。

Answer 1

在select 中使用ng-disabled

例如，

<md-select ng-model='title_page' ng-disabled="isDisabled">

提交时：

$scope.isDisabled = true;
$scope.previousTypePage = '!' + $scope.type_page; // ! is to negate
$scope.type_page = ''; //Reset the value
//Store previous type_page value that should no longer show
//Use it in a filter

回应时：

<md-option ng-repeat = "option in responding | filter : previousTypePage">

Answer 2

如下使用ng-disabled作为title_page，

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
}}

这种来自数组的拒绝只有在没有发生重定向的情况下才会起作用。每当页面重新加载时，下拉数组将作为初始值重新加载。