AngularJS复选框没有变化

时间:2015-07-23 19:06:49

标签: javascript angularjs checkbox

修改一些其他字词,以确保您发现问题。加载时,复选框具有正确的状态(无论是否选中),但我无法更改它们。当我点击它们时,它们应该呈现新的状态,不是吗?或者是否有由Angular创建的event.preventDefault()?

我正面临以下问题。

我有一个控制器和一个带有一些复选框的表单。当我点击它们时,没有任何反应。

HTML看起来像这样:

<article class="window__Content" ng-controller="ElementController as element">
    <label>Favorite Colors</label>
    <div class="form-group">
        <label class="checkbox-inline">
            <input type="checkbox" name="favoriteColors" ng-model="element.formData.red"> Red
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="favoriteColors" ng-model="element.formData.blue"> Blue
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="favoriteColors" ng-model="element.formData.green"> Green
        </label>
    </div>
</article>

我的控制器看起来像这样:

(function(){
    'use strict';

    angular
        .module('app')
        .controller('ElementController', [elementController]);

    function elementController(Element, WindowData){

        /* jshint validthis: true */
        var vm = this;
        vm.formData = {
            red: true,
            blue: false,
            green: true
        };

        activate();

        ///////////////

        function activate(){
        }

    }

})();

所以我想做的就是检查并取消选中复选框,这就足够了。也许你们中的任何人都可以发现错误。

我应该补充说,HTML-Snippet是通​​过ng-include包含在DOM中的。这可能是个问题吗

格尔茨 拉吉

2 个答案:

答案 0 :(得分:0)

我会用<body ng-app="myApp" ng-controller="ElementController"> <article class="window__Content"> <label>Favorite Colors</label>{{vm}} <div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" name="favoriteColors" ng-model="element.formData.red" ng-checked="vm.formData.red"> Red </label> <label class="checkbox-inline"> <input type="checkbox" name="favoriteColors" ng-model="element.formData.blue" ng-checked="vm.formData.blue"> Blue </label> <label class="checkbox-inline"> <input type="checkbox" name="favoriteColors" ng-model="element.formData.green" ng-checked="vm.formData.green"> Green </label> </div> </article> </body> 来解决这个问题。

工作小提琴:http://jsfiddle.net/d93mzqw0/1/

angular.module('myApp',[])
.controller('ElementController', ElementController);
function ElementController($scope){

    /* jshint validthis: true */
    $scope.vm = {};
    $scope.vm.formData = {
        red: true,
        blue: false,
        green: true
    };

};

和js:

dm <- as.matrix(dist_m)
df <- data.frame(data = c(dm),
                 column = c(col(dm)),
                 row = c(row(dm)))

# get only one triangle
df <- df[df$row > df$column, ]

# put in order
df[order(df$data), ]

# for letters, add this
df$row <- LETTERS[df$row]
df$column <- LETTERS[df$column]

答案 1 :(得分:0)

最后在为您创建jsFiddle时发现了错误。我有一个父控制器在<article>的每个onclick上触发了event.preventDefault() - 标签......

那我们学到了什么?分享问题会让你比保守秘密更聪明:D

Thx伙计们!