ng-hide在angular JS中不起作用

Question

我需要两个ng-hide directives.One用于编辑工资，一个用于隐藏salary.But，如果我在单个html标记中使用两个ng-hide指令，只有编辑有效，但隐藏无效。

<table border="1">
            <tr>
                <td>ID</td>
                <td>Name</td>
                <td ng-hide="hide"><span>Salary</span></td>
            </tr>
            <tr ng-repeat="faculty in facultymembers track by $index">
                <td><span ng-hide="editmode">{{faculty.id}}</span>
                <input
                    type="text" ng-show="editmode" ng-model="faculty.id"></td>
                <td><span ng-hide="editmode">{{faculty.name}}</span>
                <input
                    type="text" ng-show="editmode" ng-model="faculty.name"></td>
                <td><span ng-hide="editmode || hide">{{faculty.salary}}</span>
                <input
                    type="text" ng-show="editmode" ng-model="faculty.salary"></td>
                <td><button ng-hide="editmode" ng-click="editmode=true;editfaculty($index)">EDIT</button>
                    <button ng-show="editmode" ng-click="editmode=false">DONE</button></td>
                <td><button ng-click="removefaculty($index)">REMOVE</button></td>
                <td><button ng-hide="hide" ng-click="hide=true">Hide salary</button>
                <button ng-show="hide" ng-click="hide=false">Show salary</button></td>
            </tr>
        </table>

Answer 1

将两个语句组合在一起：

ng-hide="hide || editmode"

Answer 2

使用逻辑或运算符ng-hide="variableA || variableB"，或者您可以使用ng-show并否定条件(ng-show="!variableB")，这样您就可以获得两个ng-hide‘s’

我个人更喜欢使用逻辑运算符。

Answer 3

看看ng-click中的最后一行。你的：

<button ng-show="hide" ng-click="hide-false">Show salary</button></td>

应该是：

<button ng-show="hide" ng-click="hide=false">Show salary</button></td>

你有一个应该是=的-。