1

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

这是我的 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 将列表添加到表中而不是刷新页面。

感谢您对任何想法的帮助。

4

2 回答 2

0

使用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">
于 2018-02-23T04:32:56.583 回答
0

用于ng-disabledtitle_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
}}

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

于 2018-03-21T07:29:39.967 回答