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

Question

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 ?

What are you trying to accomplish here? Are you really trying to render an element into the type attribute? — David L
– David L, Commented May 22, 2017 at 15:14

Deblaton Jean-Philippe · Accepted Answer · 2017-05-22 15:22:42Z

1

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.

edited May 22, 2017 at 15:22

answered May 22, 2017 at 15:16

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mistalis Over a year ago

@GiorgiGoginashvili Can you accept the answer if it solved your issue?

anoop · Accepted Answer · 2017-05-22 15:25:44Z

0

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>

edited May 22, 2017 at 15:25

answered May 22, 2017 at 15:17

anoop

3,8222 gold badges18 silver badges28 bronze badges

1 Comment

anoop Over a year ago

i think initial tag was of angular2, :) so posted it *ngFor :) now updated the answer.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related