1

サーバーからデータを取得しているとしましょう。

data = {
"value": "123456",
"included": true,
"invalid": true,
"warning": false,
"error": false,
}

ブール値の状態に応じて、値を特定のスタイルで表示する必要があります。私が現在行っているのは、データをJSコンストラクターにフォーマットすることです

$scope.model = new SomePrototype(data);

CSS を推測するには、ルールを計算します (疑似コードで):

var SomePrototype = function (data) {

        this.computeCSS = function () {
        if data.error then css = 'danger'
        if (data.included and data.invalid) then css = 'danger'
        /*other rules*/
        return css
        }
}

次に、HTML ビューで computeCSS() を呼び出します

<p class="{{model.computeCSS()}}">{{model.value}}</p>次のようにレンダリングされます

`<p class="danger">123456</p>`

問題: まず、このようなものは他では見たことがありません。だから私は何か間違ったことをするかもしれません。通常、クラス値を保持するために $scope の下にオブジェクトを取得します。次に、各コントローラーで SomePrototype を呼び出す必要があります。

サービス/ファクトリを使用する方が合法かどうか疑問に思います。最終結果は基本的に同じように見えます。

4

2 に答える 2

2

あなたは正しい道を進んでいますが、私はng-classcharlietflが提案したように使用します。

あなたが言及したようにロジックを関数内に保持すると、モデルの無効な状態と見なされるもののルールを単体テストできます。(条件は単純ですが、ビューにロジックを含めることは通常理想的ではありません)

モデル

var SomePrototype = function (data) {

    this.isDataInValid = function () {
        return data.error || data.included && data.invalid;
    }
}

テスト

it('should be invalid with error or included && invalid', function () {

    var data = {
        "value": "123456",
        "included": true,
        "invalid": true,
        "warning": false,
        "error": false,
    }
    var someModel = new SomePrototype(data);
    var isDataInValid = someModel.isDataInValid();
    expect(isDataInValid).toBe(true);
});

あなたの<html/>

<p ng-class="{danger : model.isDataInValid() } ">{{model.value}}</p>
于 2013-11-06T12:41:28.900 に答える