2

私は自分のデータをオブジェクトの配列に保存しており、それを使用してページにリストを作成していますngRepeat。問題は、オブジェクト内の値の一部が null であり、オブジェクト全体ではなくその行だけを非表示にしたいことです。ngHide個々の 's で使用してみました<li>が、行を非表示にするだけなので、行を折りたたむことはありません。フィルターを使用して自動的に行うことができる場合、関数または追加の css を使用して高さをゼロに減らしたくありません。 .

私の最善の努力にもかかわらず、null 行を非表示にして他の行を表示するカスタム フィルターを作成できないようです。nullの場合は値を返すところまで持っていましたfalseが、それを削除して別のことを試し、どうやってそこにたどり着いたのか忘れました（ローカルバージョニングはありません）。

これは私の以前の質問からのフィドルですが、フィルタリングしようとしているすべての部分が含まれています。http://jsfiddle.net/E2GB9/9/

データのフォーマット:

function TypeCtrl($scope) {

$scope.styles = [
    {name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'},
    {name: 'Example 2', h1:'', h2:'24px', p:'12px', className:'example2'},
    {name: 'Example 3', h1:'24px', h2:'', p:'12px', className:'example3'},
    {name: 'Example 4', h1:'32px', h2:'24px', p:'', className:'example4'}];
}

ngRepeathtmlで：

<li ng-repeat="style in styles">
            <span>Name: {{style.name}}</span><br>
            <span>H1: {{style.h1}}</span><br>
            <span>H2: {{style.h2}}</span><br>
            <span>P: {{style.p}}</span><br>
            <button class="btn-small" type="submit" ng-click="$parent.appliedStyle=style.className">Apply {{style.name}}</button>
</li>

したがって、style.h1 == nullその行のみを非表示にしたい場合。h2、p なども同様です。

4

2 に答える 2

1

ng-hide行が折りたたまれていない理由は、<br>すべての<span>要素に続くためです。あなたが代わりに書いた場合、それはうまくいくでしょう：

<p ng-hide="!style.h1">H1: {{style.h1}}</p>

（そしていいえ<br>）

<div>a の代わりに a を指定することもできます<p>(または任意のブロック要素、または新しい行を強制する<span>asのスタイル)。display:block

于 2013-10-24T08:30:25.513 に答える
0

ng-repeat でカスタム フィルターを使用できます。

function TypeCtrl($scope) {

$scope.styles = [
    {name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'},
    {name: 'Example 2', h1:'', h2:'24px', p:'12px', className:'example2'},
    {name: 'Example 3', h1:'24px', h2:'', p:'12px', className:'example3'},
    {name: 'Example 4', h1:'32px', h2:'24px', p:'', className:'example4'},
    {}];

$scope.checkNull = function(row)  {
    return (row.hasOwnProperty('name') || row.hasOwnProperty('h1')  
|| row.hasOwnProperty(' ')  || row.hasOwnProperty('p')  );
    }
}

row.hasOwnProperty() の代わりに、アンダースコアを使用してオブジェクトのサイズを確認することもできます。

これは空白であるため、最後の行は表示されません。

ng-html で繰り返す

<ul class="unstyled">
        <li ng-repeat="style in styles | filter:search | filter:checkNull">
            <span>Name: {{style.name}}</span><br>
            <span>H1: {{style.h1}}</span><br>
            <span>H2: {{style.h2}}</span><br>
            <span>P: {{style.p}}</span><br>
            <button class="btn-small" type="submit" ng-click="$parent.appliedStyle=style.className">Apply {{style.name}}</button>
        </li>
    </ul>
于 2013-10-24T08:28:27.530 に答える