Question

我有三个下拉菜单： -

<form name="myForm" data-ng-submit="save(myForm.$valid)"novalidate="novalidate">
    <label>1st</label>
      <select ng-model="a.value[0]">
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>
      </select>
     <label>2nd</label>
     <select ng-model="a.value[1]">
          <option value="One">One</option>
          <option value="Two">Two</option>
          <option value="Three">Three</option>                            
     </select>
    <label>3rd</label>
      <select ng-model="a.value[2]">
         <option value="One">One</option>
         <option value="Two">Two</option>
         <option value="Three">Three</option> 
      </select>

     <button type="submit" class="btn btn-warning"><i class="fa fa-save"></i>
           Save</button>
   </form>

我想要的是用户在每个下拉列表中选择唯一值，如果没有收到通知。

$scope.a.value = [];
 scope.func = function () {  
if (_.uniq(scope.a.value).length !== scope.a.value.length) {
scope.notify("error", "Please set unique values");
 }
};

我使用了上面的代码，但没有做对吗？请告诉我我做错了什么？或者给我一个可能的解决方案。

另外我想要的是，如果值不是唯一的，则不会保存它。我应该申请哪些验证？在哪里？

Answer 1

在每个select指令中使用ng-change="uniqCheck()"：

        <select ng-model="a.value[0]" ng-change="uniqCheck()">
            <option value="One">One</option>
            <option value="Two">Two</option>
            <option value="Three">Three</option>
        </select>

在控制器中使用：

    $scope.uniqCheck = function(){
        $log.log('this is $scope.a', $scope.a);
        if (_.uniq($scope.a.value).length !== $scope.a.value.length) {
            // $scope.notify("error", "Please set unique values");
            $window.alert("error - Please set unique values")
        }
    }

这应该是@ Selva.K评论

Answer 2

您的代码应该可以正常工作 - _.uniq返回一个删除了重复值的数组 - 因此，如果您将_.uniq的结果长度与未修改数组的结果进行比较，则可以确定值是否正确都是独一无二的。

你缺少的一步是你没有打电话给你的验证 - 正如Anandapriyan S.D.指出的那样。

您需要确保每次更改选择时都调用检查唯一性的函数。

<div ng-controller="Ctrl">
    <label>1st</label>
    <select ng-model="a.value[0]" ng-change="uniqCheck()">
      <option value="One">One</option>
      <option value="Two">Two</option>
      <option value="Three">Three</option>
    </select>
    <label>2nd</label>
    <select ng-model="a.value[1]" ng-change="uniqCheck()">
      <option value="One">One</option>
      <option value="Two">Two</option>
      <option value="Three">Three</option>
    </select>
    <label>3rd</label>
    <select ng-model="a.value[2]" ng-change="uniqCheck()">
      <option value="One">One</option>
      <option value="Two">Two</option>
      <option value="Three">Three</option>
    </select>
  </div>


function Ctrl($scope) {
  // not sure why you are nesting values onto a, unless a has more important information 
  // you could just use $scope.a = []; and then use $scope.a[0] ...
  $scope.a = {};
  $scope.a.value = [];
  $scope.notify = function(error, message) {
    alert(error + ': ' + message);
  }
  $scope.uniqCheck = function() {
    if (_.uniq($scope.a.value).length !== $scope.a.value.length) {
      $scope.notify("error", "Please set unique values");
    }
  };
}

https://plnkr.co/edit/UARPwYWQGjJux9FrQwFc?p=preview

如何使用lodash过滤器？

2 个答案: