个人中心
gpt4 book ai didi

javascript - 用它来定义 Angular 函数

转载 作者：行者123 更新时间：2023-11-28 00:19:01 26 4
gpt4 key购买 nike

我正在学习 Angular 并尝试使用 Controller ，但是 ng-click 不起作用(该函数未调用)。 chrome扩展Batarang告诉函数被定义为null，为什么？

angular.module('starter', ['ionic'])

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})


.controller("TodoControl", function Controller() {
    var thisRef = this;

    this.todos = [
        {
            text: "mein todo 1",
            done: false
        },
        {
            text: "mein todo 2",
            done: true
        }
    ];

    this.newEntry = "hallo";

    this.AddEntry = function () {
        console.log("adding");
        thisRef.todos.push({
            text: this.newEntry,
            done: false
        });
        thisRef.newEntry = "";
    }

});
<body ng-app="starter">

    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>
        <ion-content>
            <div ng-controller="TodoControl as ctr" class="container">
                <form role="form">
                    <div class="form-group" ng-repeat="t in ctr.todos">
                        <div class="checkbox">
                            <label class="checkbox-inline">
                                <input class="form-control todoFormControl" type="checkbox" ng-model="t.done"><span>{{t.text}}</span></label>


                        </div>
                    </div>
                </form>
                
                
                <label><input class="todoNewTaskIn" type="text" placeholder="New Task" value="{{ctr.newEntry}}" Style="border: 1px solid gray;" ><button class="button" ng-click="ctr.AddEntry()">Add</button></label>
                
            </div>
        </ion-content>
    </ion-pane>
</body>

这是一个 ionic 应用程序(因此包括 ionic 在内的 Angular )

编辑:这里有一个js fiddle :http://jsfiddle.net/duowfLsn/

最佳答案

将按钮移出该部分，它应该可以工作。更新了您的示例

<label>
<input class="todoNewTaskIn" type="text" placeholder="New Task" value="{{ctr.newEntry}}" Style="border: 1px solid gray;" >
<button class="button" ng-click="ctr.AddEntry()">Add</button>
</label>

变成了

<label>
<input class="todoNewTaskIn" type="text" placeholder="New Task" value="{{ctr.newEntry}}" Style="border: 1px solid gray;" />
</label>
<button class="button" ng-click="ctr.addEntry()">Add</button>

http://jsfiddle.net/duowfLsn/3/

关于javascript - 用它来定义 Angular 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30200420/

26 4 0
文章推荐： javascript - 无法弄清楚历史JS
文章推荐： javascript - Bootstrap Accordion - 导航离开后保持打开/关闭？
文章推荐： javascript - 如何使用 ng-repeat 返回不同的值(无重复)
文章推荐： c++ - C++ 中的指针初始化(或缺少)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com