代码之家  ›  专栏  ›  技术社区  ›  Tracy Zhou

默认情况下,加载时选中的Angularjs复选框不在具有ng true值的窗体内工作

  •  1
  • Tracy Zhou  · 技术社区  · 6 年前

    我知道有类似的问题,但这个复选框在表单中。如何在加载时默认选中复选框“subscribe”?

    以下是我的HTML的一部分:

        <div ng-app="app9" ng-cloak>    
            <div ng-controller="userCtrl">
                <form name="userForm" ng-submit="saveUser(userInfo)">
                    <label>First Name :</label>
                    <input type="text" name="fname" ng-model="userInfo.fName"/>   
                    <br />    
                    <label>Last Name :</label>
                    <input type="text" name="lname" ng-model="userInfo.lName"/>  
                    <br />    
                    <label>Street :</label>
                    <input type="text" name="street" ng-model="userInfo.street"/>
                    <br />    
                    <label>Subscribe :</label>
                    <input type="checkbox" name="subscribe" ng-model="userInfo.subscribe" />    
                    <br />    
                    <label>Delivery Method :</label>
                    <select name="delivery" ng-model="userInfo.delivery" ng-required="true" >
                        <option value="Email">Email</option>
                        <option value="Mail">Mail</option>
                    </select>
    
                    <br /><br />
    
                    <input type="submit" value="Save" ng-disabled="userForm.$invalid"/>
    
                    <ul>
                        <li ng-repeat="item in user">
                            {{'User: ' + item.fName + ' ' + item.lName + ' ' + item.street + ' ' + item.subscribe + ' ' + item.delivery}}
                        </li>
                    </ul>
                </form>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
        <script src="js/exam9.js"></script>
    </body>
    

    这是我的Javascript exam9.js:

    var app9 = angular.module('app9', []);
    app9.controller('userCtrl', function ($scope) {        
        userInfo.subscribe = true;
        $scope.saveUser = function (userInfo) {
            if ($scope.userForm.$valid) {
                $scope.user.push({
                    fName: userInfo.fName,
                    lName: userInfo.lName,
                    street: userInfo.street,
                    subscribe: userInfo.subscribe,
                    delivery: userInfo.delivery
                });
                console.log("User saved");
            } else {
                console.log("Error: Couldn't save user")
            }
        }
    });
    

    我试过userInfo.subscribe=true和$scope.userInfo.subscribe=true。

    更新:抱歉,这可能是一个重复的问题。它对我不起作用的原因是因为我原来有这个:

    <input type="checkbox" name="subscribe" ng-model="userInfo.subscribe" ng-true-value="'Subscribe'" ng-false-value="'Don\'t Subscribe'"/>
    

    以下对我不起作用:

    $scope.userInfo = {};
    $scope.userInfo.subscribe = true; 
    

    应该是:

    $scope.userInfo = {};
    $scope.userInfo.subscribe = 'Subscribe';
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   Pedro Henrique    6 年前

    您应该首先在$scope上声明userInfo对象。

    它对我来说很管用:

    var app9 = angular.module('app9', []);
    app9.controller('userCtrl', function ($scope) {        
        $scope.userInfo = {};
        $scope.userInfo.subscribe = true;
        $scope.saveUser = function (userInfo) {
            if ($scope.userForm.$valid) {
                $scope.user.push({
                    fName: userInfo.fName,
                    lName: userInfo.lName,
                    street: userInfo.street,
                    subscribe: userInfo.subscribe,
                    delivery: userInfo.delivery
                });
                console.log("User saved");
            } else {
                console.log("Error: Couldn't save user")
            }
        }
    });