0

そこで、AngularJSを使用してアプリケーションを構築しています。

JSONからデータを取得します。JSONは、ラベル、x座標、y座標、および幅/高さを持つデータから存在します。

私は自分のファイルのこのコードでこれを行いcontroller.jsます：

function locationController( $scope, $http, getCss) {
    $http.get('file.json').success(function(data) {
        $scope.locations = data;
    });
}

そして、次のようにHTMLで出力します。

<section ng-controller="locationController">
    <ul>
        <div ng-repeat="location in locations" ng-style="location.css()" >
            <p>{{location.label}}</p>
        </div>
    </ul>
</section>

ここで、繰り返しているdivのCSSを生成するサービスを作成したいと思います。これは、JSONから取得した場所の幅/高さxeny座標に基づいています。

コードは次のとおりです。

var app = angular.module('myApp', []);
app.factory('getCss', function() {
  return {
    css : function(x , y , value) {
      return {
                backgroundColor: "#333",
                x: (x - value) + 'px',
                y: (y - value) + 'px',
                width: (value * 2) + 'px',
                height: (value * 2) + 'px',
                color: "#FFF"
             }
    }
  }
});

しかし、このサービスを各場所にリンクするにはどうすればよいですか？

4

1 に答える 1

1

次のように、コントローラーgetCssでサービスを公開します。

function locationController( $scope, $http, getCss) {
  $http.get('file.json').success(function(data) {
   $scope.locations = data;
 });
  $scope.css = function(location) {
   return getCss.css(location.x, location.y, location.value);
  }
}

そしてHTMLで：

<div ng-repeat="location in locations" ng-style="css(location)" >
    <p>{{location.label}}</p>
</div>
于 2013-01-21T17:06:11.307 に答える