1

注: 以下のコードは単なるロジックであるため、パラメーターは定義されていません。それらは定義されており、私がいる同じjavascriptファイルで積極的に使用されています.

私はjavascript/angularjsを初めて使用しています（これがどのコードなのかさえわかりません）。今のところ、構文とその他すべてが進行しているため、本当にカーブボールを投げかけています。以下のロジックを使用して、ストアが開いているか閉じているかに基づいて true/false 値を返す別の関数を返す、dateTimeService.js ファイルにメイン関数が呼び出されています。

app.factory("dateTimeService", function() {

    return { 
        isHelperOpen: function(hoursString) {
            if (openTime <= nowTime && nowTime <= closeTime)
                  return true;
            else
                  return false;}
    }
}

これらの関数のいずれかによって返される真/偽の値に基づいて、「オープン」または「クローズ」などの値を表示するにはどうすればよいですか? html はどのように表示されますか? これを行うために別の関数を作成しますか? どんな助けでも大歓迎です..事前に感謝します!

<div class="availability">{{isHelperOpen(item)}}</div> --this is my long shot
4

3 に答える 3

1

このようなものには角度フィルターをお勧めします。レンダリングされた値をデータ値とは別に保持し、DOM とビュー コントローラーをよりクリーンに保つのにも役立ちます。

HTML

<div class="availability">{{item | helperOpenFilter}}</div>

角度フィルター

.filter( 'helperOpenFilter', function(dateTimeService){
    return function (obj){
       return dateTimeService.isHelperOpen(obj) ? 'Open' : 'Closed';
    }
}
于 2015-12-08T03:35:57.187 に答える
1

ng-if を使用できます。

 <span ng-if="isHelperOpen(foo)">Open</span>
 <span ng-if="!isHelperOpen(foo)">Closed</span>

またはあなたが試すことができます：

 <span ng-show="isHelperOpen(foo)">Open</span>
 <span ng-hide="isHelperOpen(foo)">Closed</span>

またはフィルターを使用できます。

于 2015-12-08T03:36:15.247 に答える
1

アプリケーションが適切にブートストラップされ、コントローラーからサービスを呼び出すことができると仮定すると、何をしたいのかを示す非常に単純化されたフィドルがここにあります。

http://jsfiddle.net/90hozqr1/1/

HTML:

<body ng-app="myApp">
  <div>
    <div ng-controller="MyController">
      <div>
        <span>{{callServiceWith(true) | displayBool}}</span>
        <span>{{callServiceWith(false) | displayBool}}</span> 
      </div>
    </div>
  </div>
</body>

Javascript:

var myApp = angular.module("myApp", []);

myApp.factory("dateTimeService", function() {
    return { 
        isHelperOpen: function(hoursString) {
            return hoursString
        }
    }
})

myApp.controller("MyController", function($scope, dateTimeService) {
    $scope.callServiceWith = function(bool){
        return dateTimeService.isHelperOpen(bool);
    }
})

myApp.filter("displayBool", function(){
  return function(input) {
    if(input) {
      return "Open"
    } else {
      return "Closed"
    }
  }
})

注目すべきことは、サービスを呼び出しているスコープ内の関数がありcallServiceWith、テンプレートから呼び出されていることです。出力は、 と呼ばれるカスタム フィルターを介して実行されていますdisplayBool。

于 2015-12-08T04:11:23.493 に答える