How to get a sign instead of a value in html?

In my user table, there is an active field, instead of true/false I want the checkbox to be highlighted (it does not matter) if true and a minus sign (not important) if false.

In my user table, there is an active field, instead of true/false I want the checkbox to be highlighted (it does not matter) if true and a minus sign (not important) if false.

And when changing user data, I want to click on one of these checkboxes to set the value.

How can I give a tick instead of a value?

    <!-- user.html -->
&lt;div class="container" ng-app="app" ng-controller="DashboardCtrl"&gt;
&lt;div class="row  table-responsive"&gt;
    &lt;table class="simple-little-table"&gt;
        &lt;tr&gt;
            &lt;th&gt;id&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Lastname&lt;/th&gt;
            &lt;th&gt;Username&lt;/th&gt;
            &lt;th&gt;email&lt;/th&gt;
            &lt;th&gt;Role&lt;/th&gt;
            &lt;th&gt;Active&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr ng-repeat="user in users | filter:$scope.query"&gt;
            &lt;td&gt;{{ user.id}}&lt;/td&gt;
            &lt;td&gt;{{ user.firstName}}&lt;/td&gt;
            &lt;td&gt;{{ user.lastName}}&lt;/td&gt;
            &lt;td&gt;{{ user.username}}&lt;/td&gt;
            &lt;td&gt;{{ user.email}}&lt;/td&gt;
            &lt;td&gt;{{ user.roles}}&lt;/td&gt;
            &lt;td&gt;{{user.active}}&lt;/td&gt;
            &lt;td&gt;&lt;div&gt;
                &lt;button class="btn btn-primary" ng-click="editUser(user.id)"&gt;Редактировать&lt;/button&gt;
            &lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;

</div>

that's edituser.html

<div class="row">
<div class="col-lg-4 col-sm-12" style="margin: 15px">
Активация:
</div>
<div class="col-lg-6 col-sm-10" style="margin: 5px;">
<textarea style="display: inline-block; width: 100%; height:3rem; resize: none;" ng-model="user.active"
ng-if="editActive"/>
<div ng-if="!editActive" style="display: inline-block; width: 100%; overflow-wrap: break-word">
{{user.active}}
</div>
</div>
<div class="col-lg-1 col-sm-1">
<button ng-click="changeActive()"
ng-if="editActive">
<i class="glyphicon glyphicon-ok"
style="size: 20px"/>
</button>
<button ng-click="changeActive()"
ng-if="!editActive">
<i class="glyphicon glyphicon-pencil"
style="size: 20px"/>
</button>
</div>


Angular JS Development Company

If you’re finding AngularJS Development Company for consultation or Development, your search ends here at Data EximIT 

🔗 Click here to know more: AngularJS Development




Full Stack development: Angular 2/4/5/6/7 - Reusable Custom Bootstrap Modal Dialog Angular Component(3 ways)

Angular 2/4/5/6/7 - Reusable custom Bootstrap Modal dialog angular component-3 ways(code snippet with eg)&nbsp;

Angular 2/4/5/6/7 - Reusable custom Bootstrap Modal dialog angular component-3 ways(code snippet with eg)