AngularJS ng-ifがDIVを表示しない

Question

なぜ私のアプリケーションが正しく動作していないのですか？欲求が常に表示される場合は

Fiddle

<div class="fix" ng-if="showAdd()"> 
    <button type="button" class="btn btn-link"> 
    <span class="glyphicon glyphicon-plus"></span> 
    <span class="fix">Aggiungi un Preferito</span> 
    </button> 
    <div class="add"> 
    Aggiungi un Preferito 
    </div> 
</div> 
<div class="edit" ng-if="showEdit()"> 
Modifica 
</div> 

Answer 1

あなたのフィドルに間違いがあるようです。次へごshowAddとshowEdit方法変更した場合、編集のdivが表示されます：それはどこにも呼び出されないstartAdd機能によって活性化されるため

function showAdd() { 
    return $scope.addBookmark && !$scope.editBookmark; 
} 

function showEdit() { 
    return $scope.editBookmark && !$scope.addBookmark; 
} 

を追加divが追加れることは決してありません。

また、ここにjavascriptコードを掲載してください。そうすれば、何かがあなたのフィドルに起こった場合、この質問はまだ他の人にとって役に立つかもしれません。

EDIT：これに

<div class="fix" ng-if="showAdd()"> 
    <button type="button" class="btn btn-link"> 
    <span class="glyphicon glyphicon-plus"></span> 
    <span class="fix">Aggiungi un Preferito</span> 
    </button> 
    <div class="add"> 
    Aggiungi un Preferito 
    </div> 
</div> 

：

あなたがこれを変更する必要が動作するようにあなたの追加ボタンを取得するには

<button type="button" class="btn btn-link" ng-click="startAdd()"> 
    <span class="glyphicon glyphicon-plus"></span> 
    <span class="fix">Aggiungi un Preferito</span> 
    </button> 
<div class="fix" ng-if="showAdd()"> 
    <div class="add"> 
    Aggiungi un Preferito 
    </div> 
</div> 

Answer 2

：これはこれはフィドル..です 「NG-IF」タグを底にDIVの（一度に）1を示さなければなりませんどちらか一方が、次のようにビューを構築することがベストプラクティスです：

<div class="fix" ng-if="showingAdd"> 
    <button type="button" class="btn btn-link"> 
    <span class="glyphicon glyphicon-plus"></span> 
    <span class="fix">Aggiungi un Preferito</span> 
    </button> 
    <div class="add"> 
    Aggiungi un Preferito 
    </div> 
</div> 
<div class="edit" ng-if="!showingAdd"> 
Modifica 
</div> 

Answer 3

問題がshowEdit()機能です。あなたのフィドルから

あなたが持っている：startEditとstartAddのように定義されている

function showEdit() { 
     return $scope.startEdit && !$scope.startAdd; 
    } 

は：

function startAdd() { 
     $scope.addBookmark = true; 
     $scope.editBookmark = false; 
    } 


    function startEdit() { 
     $scope.editBookmark = true; 
     $scope.addBookmark = false; 
    } 

をすると、あなたのNG-場合の通話 showEdit()それはしかし $scope.startEdit && !$scope.startAdd;

、$scope.startEdit戻りますと$scope.startAddは関数なので、真実になります（つまり、evaluateat eからtrueへのブール式）。したがって、ブール式は常にfalseと評価されます（DIVは非表示のままです）。

は、下記を参照してください：あなたがいずれかの関数を呼び出すまたはブール式を評価すると、概念的に何かが欠けているよう

$scope.startEdit && !$scope.startAdd; 
true && !true 
true && false 
false 

に見えます。

JavaScript関数を呼び出す場合は、ng-if="showEdit()"ブロックと同じように、関数の名前にかっこを付ける必要があります。 、あなたはまだしかし、startEdit()とstartAdd()としては何も返さない、問題を抱えていると思います

function showEdit() { 
     return $scope.startEdit() && !$scope.startAdd(); 
    } 

：$scope.showEdit()がstartAdd()とstartEdit()を呼び出すことを意図している場合

は同様に、あなたはこのような何かを行う必要がありますしたがってundefinedと評価されます。

上記のようにshowEdit()関数を編集し、startEdit()とstartAdd()にブール式を返すと、良い結果が得られます。