在AngularJS 1.x中輸入複選框切換已選中/未選中

我對AngularJS仍然很陌生，我試圖建立一個簡單的函數，在單擊時打開/關閉複選框。因此，下面代碼中的點擊li元素會將該複選框設置爲打開或關閉。在AngularJS 1.x中輸入複選框切換已選中/未選中

任何人都可以建議使用AngularJS做到這一點的最佳方法，我知道jQuery會很簡單，但我試圖以角度的方式做到這一點。

我的HTML模板

<ul> 
     <li ng-repeat="page in rule.pages" ng-click="toggleNetwork(page.id); ruleForm.$setDirty()"> 
      <span class="pull-left"><i class="check material-icons nomargin">{{rule.pages.indexOf(page.id) >= 0 ? 'check_box' : 'check_box_outline_blank'}}</i></span> 
     </li> 
    </ul>

我的控制範圍邏輯代碼

$scope.toggleNetwork = function(networkId) { 
    // function called when checkbox clicked 

}

來源

2016-11-25 Zabs

我沒有看到複選框在你的HTML，所以我假設你想L1標籤工作作爲複選框。

你可以做到這樣，如果頁面可以有附加屬性：

$scope.toggleNetwork = function(network) { 
    network.toggle = !network.toggle; 
}

如果你不希望添加屬性的網絡模型，你可以存儲在切換網絡陣列;

$scope.toggledNetworks = []; 
$scope.toggleNetwork = function(networkId) { 
    var index = $scope.toggledNetworks.indexOf(networkId); 
    if (index === -1) 
     $scope.toggledNetworks.splice(index, 1); 
    else 
     $scope.toggledNetworks.push(networkId) 
}

然後，如果你想檢查網絡切換，你可以使用函數：

$scope.isToggled = function(networkId) { 
    return $scope.toggledNetworks.indexOf(networkId) !== -1; 
}

注：

rule.pages.indexOf(page.id)

總是返回-1。頁面包含對象，你想要一個對象的屬性索引不在這個數組中

來源

2016-11-25 14:30:09 pato

謝謝 - 我在哪裏放置isToggled函數？ – Zabs

在同一個控制器中。這個函數可以用來改變類：ng-class =「isToggled（page.id）？''''：'未轉換'」 – pato

如果你只是想打開/關閉複選框，你並不需要做任何事情。 Angular會爲您開箱即用。

你只需要一個布爾變量在你的控制器，就像這樣：

//myController.js

$scope.myCheckboxValue = false;

而且你的HTML應該是這樣的：

// MyTemplate的。 html

<input type="checkbox" ng-model="myCheckboxValue">

無論何時您單擊複選框，更改將會已經反映在myCheckboxValue上。

來源

2016-11-25 15:04:20

在AngularJS 1.x中輸入複選框切換已選中/未選中

回答

相關問題