CODEWITHSUNDEEP
htmlangularjs
user7831568
user7831568

Reputation:

How to create button in html if angular function returns true?

I have table with ng-repeat in html here is of this table 

<tbody>
             <tr dir-paginate="x in serverData | filter:filterData | filter:filterData | itemsPerPage: itemPerPageValue |  orderBy : orderBy">
                <td>{{ x.name }}</td>
                <td>{{ x.description }}</td>
                <td>{{ x.priority }}</td>
                <td ng-show="btnTGDetails">
                    <a class="detailButton" href="#" ng-click="loadPage('terminalList', 'page', x.id, x.name);"></a>
                </td>
                <td> <input name="addNewTerminalButton" value="Configure" type="{{ (checkTerminalGroup(x))? ('submit') : ('') }}" ng-click=""/></td>
            </tr>
        </tbody>

i want to create submit button if my checkTerminalGroup(x) angular function returns true and nothing if it returns false . I wrote this coke which is already shown before , but if my function returns false it appears like textbox, but i want nothing i need coke like

<td>{{ (checkTerminalGroup(x))? ('<input name="addNewTerminalButton" value="Configure" type="submit" ng-click=""/>') : ('') }}</td>

but it is not working . Can you tell me how can i do it ?

Upvotes: 1

Views: 274

Answers (2)

anoop
anoop

Reputation: 3822

You can achieve this by simple ng-if on input with hardcode type = "submit"

 <tbody>
      <tr dir-paginate="x in serverData | filter:filterData | filter:filterData | itemsPerPage: itemPerPageValue |  orderBy : orderBy">
          <td>{{ x.name }}</td>
         <td>{{ x.description }}</td>
          <td>{{ x.priority }}</td>
          <td ng-show="btnTGDetails">
                 <a class="detailButton" href="#" ng-click="loadPage('terminalList', 'page', x.id, x.name);"></a>
           </td>
           <td> <input name="addNewTerminalButton" ng-if="checkTerminalGroup(x)" value="Configure" type="submit" ng-click=""/></td>
      </tr>
    </tbody>

Upvotes: 0

Deblaton Jean-Philippe
Deblaton Jean-Philippe

Reputation: 11397

you can replace the

<td>{{ (checkTerminalGroup(x))? ('<input name="addNewTerminalButton" value="Configure" type="submit" ng-click=""/>') : ('') }}</td>

by

<td>
     <input name="addNewTerminalButton" 
            value="Configure" 
            type="submit" 
            ng-click=""
            ng-if="checkTerminalGroup(x)"/>
</td>

By using the ng-if directive, you are inserting/removing your input from the dom. It's often better to use ng-if over ng-show as it removes the element from the dom, and won't trigger change detection on those elements.

Upvotes: 1

Related Questions