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

在ng-disabled

中使用select

例如，

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

只有在没有重定向的情况下，这种对数组的拒绝才会起作用。每当页面重新加载时，dropdown数组将作为initital重新加载。

angularjs 1提交表单有效

2 个答案: