Condition is Not checking properly in ng-if with !state.include

Question

     <select class="form-control"
     ng-if="((!$state.includes('home.allprojects') ||
     !$state.includes('home.Sentprojects')) &&
     !dynamicFields.isShowVismaButtons)" 
     ng-model="projects.selectedBokYear" ng-change="onBokYearChange()"
     ng-options="font.value for font in projects.bokYears"></select>

Here the code must display if the state is not in the home.allprojects or home.Sentprojects and !dynamicFields.isShowVismaButtons

ng-if="((!$state.includes('home.allprojects') || !$state.includes('home.Sentprojects')) && !dynamicFields.isShowVismaButtons)"

but the Select is visible even in the home.allprojects and home.Sentprojects state

can any one give a solution for it

I would suggest putting this whole `ng-if` code inside a function in your model — Derlin, Apr 09 '18 at 10:32
You can't access $state directly in HTML. Use any scope variable to store $state and try to access it from that variable. — Srigar, Apr 09 '18 at 10:32
https://stackoverflow.com/questions/22748456/angular-js-ng-show-element-when-state-current-name-is-a-certain-value — Santosh Singh, Apr 09 '18 at 10:39
Use this link might be there is condition issue also debug your value by putting inside {{ ((!$state.includes('home.allprojects') || !$state.includes('home.Sentprojects')) && !dynamicFields.isShowVismaButtons) }} in html — Santosh Singh, Apr 09 '18 at 10:41

Sravan · Accepted Answer · 2018-04-09T10:45:26.500

0

You cant access $state in html,

Instead write a function which defines your logic and call that function from your HTML, or you can take a variable and use it in html for state

I prefer going with a function which I added in my answer.

HTML:

<select class="form-control"
ng-if="checkState()"
ng-model="projects.selectedBokYear" ng-change="onBokYearChange()"
ng-options="font.value for font in projects.bokYears"></select>

In controller,

$scope.checkState = function(){
    return ($state.includes('home.allprojects')) ||
           (!$state.includes('home.Sentprojects')) &&
           (!$scope.dynamicFields.isShowVismaButtons)
}

I have created a checkState function from HTML and defined your logic there.

Also, to check the state directly if there is no parent-child, you can use $state.current.name

$scope.checkState = function(){
return ($state.current.name != 'home.allprojects') ||
       ($state.current.name != 'home.Sentprojects') &&
       (!$scope.dynamicFields.isShowVismaButtons)
}

edited Apr 09 '18 at 10:45

answered Apr 09 '18 at 10:34

Sravan

18,467
3
30
54

you may access .run(function ($state,$rootScope) { $rootScope.$state = $state; }) – Santosh Singh Apr 09 '18 at 10:38
https://stackoverflow.com/questions/22748456/angular-js-ng-show-element-when-state-current-name-is-a-certain-value – Santosh Singh Apr 09 '18 at 10:38
@SantoshSingh, what you will do checking in `.run` function, we wants to change the html in current page depending on the condition. whats the reason to do that in `.run`? – Sravan Apr 09 '18 at 10:40
It will allow accessing the $state in HTML not limited to scope only that is it if you will debug you will get the answer – Santosh Singh Apr 09 '18 at 10:45
where you seen $state accessing in `html`? I was never knowing that. Any reference? – Sravan Apr 09 '18 at 10:48
using `rootscope` **doesnot give you a great performance**, and we need to check the state name everytime using `run` function. – Sravan Apr 09 '18 at 10:51
I know but for him, it is the great answer! as he is new to angularjs – Santosh Singh Apr 09 '18 at 10:52
We should give him the solution that can be used as a future reference, even though he is new to angular, he should know, why we should not use `rootScope`. :-) – Sravan Apr 09 '18 at 10:54
it will not make that much slower – Santosh Singh Apr 09 '18 at 10:55

Condition is Not checking properly in ng-if with !state.include

1 Answers1