[英]how to set checkbox checked based on value in one array and add value to another array if checked otherwise remove using angular js?
enter image description here Following is just the overview of the code,as given in html code i just want to show the options from options array from set object and have to set checkbox checked to option which is an answer from answer array and have to add new answer to answer if i check more options with checkbox clicked, and have to remove answer if checkbox is unchecked .在此处输入图像描述以下只是代码的概述,如html 代码中所示,我只想显示来自 set 对象的 options 数组中的选项,并且必须将选中的复选框设置为选项,这是来自答案数组的答案,并且必须添加如果我单击复选框检查更多选项,则要回答的新答案,如果未选中复选框,则必须删除答案。
<script> var adminApp = angular.module('app',[]); adminApp.controller('EditController', function ($scope) { $scope.viewQuestions=function(){ set={}; //object in which answer array and option array is present //assume; var answer= ["answer1", "answer2"]; //answer array assume var options=["option1,option2,option3,option4"]; //option array assume var answerType="Multiple"; } $scope.updateAnswer =function(isSet,index,answer,set) { for(var i=0;i<set.answer.length;i++) { if(isSet===set.answer[i]) { set.answer[index]=isSet; } else { set.answer.splice(index, 1); } } } } </script>
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> </head> <body ng-app="app" ng-controller="EditController" ng-init="viewQuestions()"> <table> <tr> <td ng-show="s.answerType === 'Multiple'"> <p ng-repeat="o in s.options">{{$index + 1}}. <input type="checkbox" name="answer-{{index}}" ng-model="isSet" value="{{o}}" ng-change="updateAnswer(isSet,$index,answer,s)">{{o}}</p> </td> </tr> </table> </body> </html>
This is not exactly what you want but it's something.这不完全是你想要的,但它是一些东西。 I change the concept to do the same in a cleaner way and more angular style.我改变了概念,以更简洁的方式和更有棱角的风格来做同样的事情。 (in my opinion) (在我看来)
I have an array of objects ( name
: The option title & active
: Checked or not) And after each change I update the set.我有一个对象数组( name
:选项标题和active
:是否选中)并且每次更改后我都会更新该集合。 With filter & map;带过滤器和地图; So, the set is always up to date因此,该集合始终是最新的
(If you receive a array of string as options, you can assume that all of them are Active: false
) (如果您收到一个字符串数组作为选项,您可以假设它们都是 Active: false
)
Maybe it can works for you in general, or you can get an idea from the code.也许它一般对你有用,或者你可以从代码中得到一个想法。
http://plnkr.co/edit/GucWDwF66A56IkXHHpwG?p=preview http://plnkr.co/edit/GucWDwF66A56IkXHHpwG?p=preview
In angular , you can bind checkbox's checked property to a method that returns ids of your mini_array that is in main_array;在angular 中,您可以将复选框的 checked 属性绑定到一个方法,该方法返回位于 main_array 中的 mini_array 的 id;
---your.html--- ---你的.html---
enter code here
enter code h
<div class="mb-2"><b>Permissions list</b></div>
<div formArrayName="permissions" *ngFor="let permission of main_array; let i=index">
<input class="mr-2" [checked]="isChecked(permission.id)" type="checkbox">
{{permission.name}}
</div>
---your.ts--- ---你的.ts---
isChecked(id) {
return this.mini_array.includes(id);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.