0

カードを挿入する小さな AngularJS ツールがあります。私の目標は、それらをローカルに保存することです。カードの配列については解決しましたが、カードのコンテンツについては解決できませんでした。これは「contenteditable」です。

そのためのプランカー（JS）を次に示します（赤い大きなボタンはlocalStorageを削除します。必ず広いウィンドウを開いてください）：http://plnkr.co/edit/SlbWZ5Bh62MDKWViUsMr

これは私のコードです（CoffeeScriptを使用。JSについては上記のPlunkerを参照してください）：

これはユーザー入力のマークアップです 

<div class="card card-{{ card.color }}">
    <header>
        <p class="points" contenteditable></p>
        <p class="number" contenteditable>#</p>
        <h2 class="customerName"  contenteditable>{{ card.customer.name }}</h2>
        <h3 class="projectName" contenteditable>Project Name</h3>
    </header>
    <article>
        <h1 class="task" contenteditable>Title</h1>
        <p class="story" contenteditable>Description</p>
    </article>
    <footer>
        <div class="divisions">
        <p class="division"></p>
        <button ng-click="deleteCard()" class="delete">X</button>
        </div>
    </footer>
</div>
<div class="card card-{{ card.color }} backside">
    <article>
        <h2 class="requirement">Requirements</h2>
        <p contenteditable></p>
    </article>
</div>

ここに、上記のコントローラーにあったカード配列の localStorage セットアップが表示されます。

Card = (@color, @customer) ->

        $scope.cards = []

        json = localStorage.getItem "cards"
        getCards = JSON.parse(json) if json?
        $scope.cards = $scope.cards.concat getCards if getCards?

        $scope.reset = ->
            localStorage.clear()

        $scope.save = ->
            cards = []
            for card in $scope.cards
                cards.push
                    color: card.color
                    customer:
                        name: card.customer.name

            localStorage.setItem "cards", JSON.stringify(cards)

        $scope.addCardRed = (customer) ->
            $scope.cards.push new Card("red", customer)
            $scope.save()

ユーザー入力を localStorage のさまざまなフィールドに保存するにはどうすればよいですか? 連載という言葉を聞いたことがありますが、私の場合は意味がわかりません!

よろしくお願いします！

4

2 に答える 2

0

今、私は何が私を混乱させたかを知っています！

カード プロパティの双方向バインディングが contenteditable で機能しませんでした。各 contenteditable 属性を削除し、p、h2 などのタグを入力タグに置き換えました。それは私にとってはうまくいきました。

@tennisagent さん、ご辛抱と素晴らしい説明をありがとうございました! $watch のヒントも！私はあなたの助けに本当に感謝しています:)

それがコントローラーの私の解決策です：

angular.controller 'CustomerController', ($scope)   ->

    $scope.customers = [
        { name: "name1" }
        { name: "name2" }
        { name: "name3" }
    ]

    $scope.cards = []

    Card = (@color, @customer, @points, @number, @projectName, @story) ->

    $scope.$watch 'cards', ((newValue) ->
        string = angular.toJson(newValue)
        localStorage["cards"] = string
    ), true

    json = localStorage["cards"]
    parsedCards = angular.fromJson(json) if json?
    $scope.cards = $scope.cards.concat parsedCards if parsedCards?


    $scope.reset = ->
        localStorage.clear()
        sessionStorage.clear()

        $scope.cards = []

    $scope.addCardRed = (customer) ->
        $scope.cards.push new Card("red", customer)

それがマークアップの私の解決策です：

<div class="card card-{{ card.color }}">
    <header>
        <input class="points" contenteditable ng-model="card.points"></input>
        <input class="number" placeholder="#" contenteditable ng-model="card.number"></input>
        <input class="customerName"  contenteditable ng-model="card.customer.name"></input>
        <input class="projectName" placeholder="Projekt" contenteditable ng-model="card.projectName"></input>
    </header>
    <article>
        <input class="task" placeholder="Titel" contenteditable ng-model="card.task"></input>
        <textarea class="story" placeholder="Story" contenteditable ng-model="card.story"></textarea>
    </article>
    <footer>
        <div class="divisions">
            <p class="division"></p>
            <button ng-click="deleteCard()" class="delete">X</button>
        </div>
    </footer>
</div>
<div class="card card-{{ card.color }} backside">
    <article>
        <h2 class="requirement">Requirements</h2>
        <textarea class="requirements" placeholder="Aspects" contenteditable ng-model="card.requirements"></textarea>
    </article>
</div>
于 2013-10-19T21:30:41.340 に答える