How to use lodash filter? - html

Question

I have three dropdowns:-
<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>
What I want is user select unique value in each dropdown, if not get notified.
$scope.a.value = [];
scope.func = function () {
if (_.uniq(scope.a.value).length !== scope.a.value.length) {
scope.notify("error", "Please set unique values");
}
};
I used the above code but didn't get it right? Please tell me what I am doing wrong? or give me a possible solution.
Also what I want is that it is not saved if the values are not unique. What validation should I apply and where?

Answer 1

Use ng-change="uniqCheck()" in each select directive:
<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>
Use in the controller:
$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")
}
}
this should work as #Selva.K comment

Answer 2

Your code should work fine - _.uniq returns an array with duplicate values removed - so if you compare the length of the result of _.uniq with the result of the unmodified array you can determine if the values are all unique.
The step you're missing is that you are not calling your validation - as pointed out by Anandapriyan S.D.
You need to make sure that every time you change your select you call the function that checks the uniqueness.
<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