在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中输入复选框切换已选中/未选中

回答

相关问题