Question

我正在做一些练习来了解Angularjs的工作原理......但我现在有点困惑......

遵循API，各种文档和教程我找不到我想要看到的内容......

所以我创建了一个小JsFiddle：http://jsfiddle.net/8HqnZ/

我正在做的事情非常基本......而且我可能也做得不好......但我正在学习，每一个提示对我来说都很棒。

我的目标是：

让一切变得充满活力......很明显。

我不明白为什么如果我在输入上更改姓名或日期，我的红条不会更新（看起来不可观察......）
我还创建了一个获取数据按钮来查看我更新的Json，但它只返回[object, Object] ...

在我理解了这两件事之后，我想让它反过来......我的意思是像一个可拖动的红条，它会更新日期......（如果可能的话）。

这是我的小应用程序：

function App($scope) {
        $scope.windows = [
            {"name":"First Window","from":"2013-11-05","to":"2013-11-21"},
            {"name":"Second","from":"2013-11-10","to":"2013-11-30"},
            {"name":"Another One","from":"2013-11-17","to":"2013-11-20"}
        ];

        $scope.addWindow = function() {
            $scope.windows.push({"name":"insert name","from":"2013-11-01","to":"2013-11-02"});
        };

        $scope.setWindow = function(from, to) {
            var f = (from.split("-")[2]) * 40,
                t = ((to.split("-")[2]) * 40) - f;

            return { f: f, t: t };
        };



        $scope.getData = function() {
            console.log($scope.windows);
        };

    };

HTML看起来像这样（我切断了“日历”）：

<div ng-app ng-controller="App">

    <section id="window-data">
        <div ng-repeat="window in windows">
            <label>Name:<input value="{{window.name}}"></label> <label>From:<input type="date" value="{{window.from}}"></label> <label>To:<input type="date" value="{{window.to}}"></label>
        </div>
        <button id="add-window" ng-click="addWindow()">Add Window</button>
    </section>

    <section id="window-display">
        <div id="date-labels">
            <div class="block">
                <span class="rotate">2013-11-01</span>
            </div>
            <div class="block">
                <span class="rotate">2013-11-02</span>
            </div>
            ...
        </div> 

        <div id="windows">
            <div class="window-container" ng-repeat="window in windows">
                <span class="window" style="left:{{setWindow(window.from, window.to).f}}px; width:{{setWindow(window.from, window.to).t}}px">{{window.name}}</span>
            </div>
        </div>

    </section>

    <button id="get-data" ng-click="getData()">Get Data</button>

</div>

如果您知道包含简单而深入的文档，示例等的好网站，请与我分享。

Answer 1

我一直只是使用Angular网站提供文档。你有gone through their tutorial吗？

对于您的问题：您需要在这些输入上使用ng-model，而不是设置值。

<input ng-model="window.name">

发生了另一个问题，因为您正在尝试使用console.log JSON。你需要把它变成一个字符串来记录它：

console.log(JSON.stringify($scope.windows));

http://jsfiddle.net/8HqnZ/1/

Answer 2

1

我不明白为什么如果我在输入上更改姓名或日期我的红条不会更新（好像它不可观察......）

要进行双向数据绑定，您需要使用ng-model 具体来说，你需要这样做

`<input ng-model="window.name">`

而不是输入值为＆＃34; window.name＆＃34;

我还创建了一个获取数据按钮来查看我更新的Json，但它返回了只是[对象，对象] ......

这是预期的。

对于可拖动的，您需要创建自定义角度js指令。

Angularjs中的可观测量

2 个答案: