Làm cách nào để xác thực bộ chọn danh mục thả xuống ng-lặp lại?

Question

Tôi đã tạo mô hình danh mục lồng nhau. Để chọn danh mục cho một sản phẩm, bạn sẽ thấy danh sách thả xuống có các danh mục chính. Khi bạn chọn một danh sách, một trình đơn thả xuống mới sẽ được thêm vào bên phải với các danh mục con cho danh mục con bạn đã chọn. Điều này lặp lại cho đến khi bạn đạt đến cấp độ cuối cùng. Khi điều này xảy ra, $scope.product.category_id được đặt. Tôi muốn vô hiệu toàn bộ các trường khi $scope.product.category_id là null.

Tôi đã sử dụng angular-bootstrap-show-errors để xác thực và tôi đã cố gắng kết hợp nó với ui-utils để đạt được điều này, sử dụng chức năng tùy chỉnh: validate_category().

Đây là HTML tôi đã sử dụng:

<span ng-repeat="parent_id in category_dropdown_parents" show-errors="{ skipFormGroupCheck: true }"> 
    <select class="form-control" name="category_id" 
     ng-init="selected_category[$index] = init_select($index);" 
     ng-model="selected_category[$index]" 
     ng-options="category.name for category in (categories | filter : { parent_id: parent_id } : true) track by category.id " 
     ng-change="select_category(selected_category[$index], $index)" 

     ui-validate="'validate_category()'" // added this to work with ui-utils 

     > 
    </select> 
    <span ng-if="$index+1 != category_dropdown_parents.length">/</span> 
</span> 

Và đây là chức năng xác nhận đơn giản của tôi:

$scope.validate_category = function() { 
    return ( $scope.product.category_id !== null 
      && $scope.product.category_id !== undefined); 
} 

Nhưng điều này không hoạt động. Ý tưởng?

EDIT: Tôi vừa nhận ra rằng vấn đề với điều này là hàm xác thực trên ui-validate được thực thi sau hàm ng-change, vì vậy nó không bao giờ có thể kiểm tra cập nhật $scope.product.category_id.

Answer 1

Đây không phải là câu trả lời lý tưởng nhưng đó là điều tốt nhất tôi có thể nhận được. Xấu hổ với tôi, điều này quá đơn giản:

<select class="form-control" name="category_id" 
    ng-init="selected_category[$index] = init_select($index);" 
    ng-model="selected_category[$index]" 
    ng-options="category.name for category in (categories | filter : { parent_id: parent_id } : true) track by category.id " 
    ng-change="select_category(selected_category[$index], $index)" 

    required // !!! 

    > 
</select> 

Đó là, chỉ cần thêm thuộc tính required. Vấn đề với điều này là vì tôi không xác thực product.category_id nhưng chỉ xác thực tất cả các menu thả xuống không được để trống. Tôi đoán tôi sẽ phải dựa vào mã trên select_category().

Answer 2

chọn của bạn đang sử dụng

ng-model="selected_category[$index]" 

nhưng chức năng xác nhận là sử dụng

$scope.product.category_id 

nên không nó được sử dụng

ui-validate="'validate_category($index)'" 

và

$scope.validate_category = function($index) { 
    return($scope.selected_category[$index] !== null 
    && $scope.selected_category[$index] !== undefined); 
}