Reputation: 4130

Hiding An Img in AngularJS Based on Model

First, I've looked through other questions and not found an answer.

I have a custom directive with a two attributes: multiValue and ngModel. Both of these values are represented in the controller as $scope.multiValue and $scope.ngModel.

The behavior of the directive changes based on the value of $scope.ngModel. In both cases, the directive creates an input and an image:

<input id="{{controlId}}" name="{{controlId}}" placeholder="Select Value(s)" 
    class="k-textbox" type="text" ng-model="ngModel" />
<img ng-src="/img/X.png" ng-click="clear()" 
    ng-show="multiValue == false && ngModel === ''" />

The purpose of the image is to show an "X" icon to clear the value represented by $scope.ngModel. However, when $scope.multiValue is true, the X icon does not need to display. When $scope.multiValue is false and a value has been selected, the X icon needs to display.

I have tried multiple means to get the X to disappear when multiValue is false or a value has not yet been selected:

Tried both "src" and "ng-src"
Tried combinations of ng-if and ng-show (including the ones above)
Tried using the condition ability of ng-src to define the image to show based on the same condition shown in the prior example.

Help would be greatly appreciated.

Upvotes: 0