2

div関数が発生したときにのみ表示したい。

ここにHTMLがありますが、常に表示されています。関数がtrueの場合にのみ表示したい

<div ng-controller="controller">
    <div ng-show="data.show"> Successfully triggered </div>
    <div ng-hide="!(data.hide)"> Error in triggering</div>
</div>

私が持っているコントローラで：

if(results.data=='success') {
    $scope.data = {
        show: false,
        hide: true
    }; 
    //Here I should display the success message
} else {
    //Here I should display the error message
}

では、if 条件で成功を、else 条件divでエラーを示すにはどうすればよいでしょうか。div

注 :可能であればdiv、スロー モーションで表示されると非常に役立ちます。jQuery のフェード タイミングのように。

4

4 に答える 4

0

ここに私の例があります: jsfiddle の show div の例

 <div ng-app>
  <div ng-controller="showCtrl">
      <div>Show Div:
          <button ng-click="set()"></button>
        <div ng-show="showDiv"> Successfully triggered </div>
        <div ng-hide="showDiv"> Error in triggering</div>
      </div>
  </div>
</div>

フェードインとフェードアウトのタイミングを追加したい場合は、angular animate を調べることをお勧めします。angular animate のドキュメントと例。

于 2015-07-03T20:08:54.520 に答える
0

data.show非表示の div を表示するのに十分なフラグを 1 つだけ維持する必要があります。

<div ng-controller="controller">
    <div ng-show="data.show"> Successfully triggered </div>
    <div ng-hide="data.show"> Error in triggering</div>
</div>

コントローラ

app.controller('myCtrl', function(){

   ///other stuff here ..


   $scope.myFunction = function(){
       if(results.data=='success') {
          $scope.data.show = true; //success
       } else {
          $scope.data.show = false; //error
       }
    }

    //init code here
    $scope.data = { show: false }; //this should be outside your show/hide function 

})
于 2015-07-03T19:23:25.947 に答える