I am attempting to conceal the field. When the user clicks on glyphicon-eye-open, I will display glyphicon-eye-close and set the condition to true. If the condition is true, then I push that value into an array.
Here is the function I am using, I have two roles: actor and singer. Both have similar fields with the same model name. I display values based on the role.
I successfully push the value into the array for the actor. However, when I try the same for the singer, it shows the error below.
Even after trying with different model names, I still encounter the same error.
TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at $$childScopeClass.ManageProfileController.$scope.pushrolefield(manageprofile.controller.js:214)
at angular.js:10773
at angular.js:18981
at $$childScopeClass.$eval(angular.js:12608)
at $$childScopeClass.$apply(angular.js:12706)
at HTMLLabelElement.<anonymous>(angular.js:18980)
at HTMLLabelElement.dispatch(jquery-2.0.3.min.js:5)
at HTMLLabelElement.y.handle (jquery-2.0.3.min.js:5)
My html :
<div class="wrap">
<div class="panel-body newPanelBody" ng-if="displaySingerInfo && !displayActorInfo">
<div class="newWrap">
<label for="qual" class="first-heading">About You*<span class="styleatr">not more than 160 Characters</span></label>
<textarea rows="4" cols="10" id="qual" class="textarea1" placeholder="say something about you " ng-model="model.aboutyou">
</textarea>
</div>
<label ng-class="{'glyphicon glyphicon-eye-close': allowrole.saboutyou, 'glyphicon glyphicon-eye-open': !allowrole.saboutyou}" ng-click="pushrolefield(allowrole.saboutyou = allowrole.saboutyou?false:true)"><input class="eyecheck1" type="checkbox" ng-model="allowrole.saboutyou" ng-hide="allowrole.saboutyou || !allowrole.saboutyou"/></label>
</div>
</div>
<div class="panel-body newPanelBody" ng-if="displayActorInfo && !displaySingerInfo">
<div class="newWrap">
<label for="qual" class="first-heading">About You*<span class="styleatr">not more than 160 Characters</span></label>
<textarea rows="4" cols="10" id="qual" class="textarea1" placeholder="say something about you " ng-model="model.aboutyou">
</textarea>
</div>
<label ng-class="{'glyphicon glyphicon-eye-close': allowrole.saboutyou, 'glyphicon glyphicon-eye-open': !allowrole.saboutyou}" ng-click="pushrolefield(allowrole.saboutyou = allowrole.saboutyou?false:true)"><input class="eyecheck1" type="checkbox" ng-model="allowrole.saboutyou" ng-hide="allowrole.saboutyou || !allowrole.saboutyou"/></label>
</div>
</div>
</div>
My controller :
$scope.rolehide = {
aboutyou: 'aboutyou',
saboutyou: 'saboutyou'
};
$scope.allowrole = {
aboutyou: false,
saboutyou: false
};
$scope.rolehiddenfields = [];
$scope.pushrolefield = function(allow){
debugger;
console.log(allow);
$scope.rolehiddenfields = [];
var users = {},
allows = $scope.allowrole;
Object.keys(allows).forEach(function(key){
allows[key] ? users[key] = $scope.rolehide[key] : null;
});
$scope.rolehiddenfields.push(users);
};