2

障害物にぶつかっています。私は簡単なコードを持っています:

<div ng-app>
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-if="!element">
        <input type="text" ng-disabled="disable" />       
        <input type="checkbox" ng-model="disable" />Disable
    </div>
</div>

これはうまくいきますが、テキストと 2 番目のチェックボックスを複数の div に分割したいのですが、両方とも最初のチェックボックスに依存しています。

<div ng-app>
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-if="!element">
        <input type="text" ng-disabled="disable" />
    </div>
    <div ng-if="!element">        
        <input type="checkbox" ng-model="disable" />Disable
    </div>
</div>

これを行うと、モデルが正しく適用されず、2 番目のチェックボックスを使用してテキスト ボックスを無効にできません。スコープを誤解していますか、それともバグですか?

この例では、2 つを外側の div でラップできることはわかっていますが、私の問題は、私の構造がテーブル構造 (はい、表形式のデータ) であり、行全体を非表示にしたくないことです。可能な限りセマンティックにマークアップします。

<table>
    <tr>
        <td></td> //this does not get hidden
        <td></td> //this does not get hidden
        <td></td> //this does not get hidden
        <td></td> //THIS GETS HIDDEN
        <td></td> //THIS GETS HIDDEN
    </tr>
</table>

プレイしたい場合は、基本的なフィドルをセットアップします: http://jsfiddle.net/qkmv6wfh/

4

2 に答える 2

-1

代わりに ng-show/hide を試してください:

  <div ng-app>
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-hide="element">
        <input type="text" ng-disabled="disable" />
    </div>
    <div ng-hide="element">        
        <input type="checkbox" ng-model="disable" />Disable
    </div>
</div>
于 2015-01-02T20:53:08.707 に答える