2017-09-06 82 views
-2

我有HTML複選框,它們的ID是從一個角度的ng-repeat生成的,並且當我嘗試收集該id以使用它時,它總是以未定義的形式返回。無法從複選框中獲取ID

$("input:checkbox.time-check-input").each(function() { 
    var ruleUnformatted = ""; 
    var checked = $(this); 
    if (checked.is(":checked")) { 
     ruleUnformatted = checked.id; 
     var name = "Rule" + count; 
     settingsObj[name] = ruleUnformatted; 
     count++; 
    } 
}); 

和HTML:

<div class="time-check"> 
    <input type="checkbox" value="None" ng-click="settings.checked($event)" class="time-check-input" id="{{level.LevelTmsCode}}-{{day.Day}}-open" name="check"/> 
    <label for="{{level.LevelTmsCode}}-{{day.Day}}-open" class="time-check-input"></label> <span>Open</span> 
</div> 

我知道有時角度可香草代碼之後加載,但我不認爲這是在這種情況下,問題是這個碼是一個開始按鈕按下。另外,在Chrome中調試時,我可以看到該ID,但出於某種原因,選擇它不起作用。

+0

請仔細閱讀本https://stackoverflow.com/questions/13151725/how-is-angularjs-different-from-jquery - 也許你要刪除這個問題。 – lin

+0

使用'ng-repeat'向我們展示您的HTML –

+0

在我的問題中添加了HTML –

回答

1

你的方法是完全錯誤的。 ,這是一個使用純角度的例子。

(function(angular) { 
 
    'use strict'; 
 
    angular.module('myApp', []) 
 
    .controller('Controller', ['$scope', function($scope) { 
 
    
 
     //Create array to hold settings 
 
     $scope.settings = []; 
 
     for (var i = 0; i < 10; i++) { 
 
     $scope.settings.push({ 
 
      text: "setting" + (i + 1), 
 
      checked: false 
 
     }) 
 
     } 
 

 
     $scope.showChecked = function() { 
 
     var arr = $scope.settings.filter(function(x) { 
 
      return x.checked; 
 
     }).map(function(x) { 
 
      return x.text 
 
     }); 
 
     console.clear() 
 
     console.log(arr) 
 
     } 
 
    }]); 
 
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="Controller"> 
 

 
    <div class="time-check" ng-repeat="setting in settings"> 
 

 
     <label class="time-check-input"> 
 
    <input type="checkbox" ng-change="showChecked()" ng-model="setting.checked" name="check"/> {{setting.text}} 
 
    </label> 
 

 
    </div> 
 

 
    </div> 
 
</div>