简体   繁体   中英

Angular function to switch boolean value

It seems like I'm having a pretty simple problem but can't seem to find a solution.

I'm trying to convert an application from vanilla JS to the angular framework. Previously, my program had an array of objects, and clicking a button would trigger a function which would just toggle one object's boolean value between true or false. The objects with value “true” would then be filtered out and displayed further down the page.

The function was...

function addRepair(here, needed) {
    possibleRepairs[here].isNeeded = needed;
    var filteredArray = possibleRepairs.filter(ind => ind.isNeeded).map(ind => ind.area + " " + ind.repair).join("\<br\>");
    document.getElementById('repairsGoHere').innerHTML = filteredArray;
}

I'm having trouble recreating this in angular. I think I've figured out most pieces of the process, but I don't know how to code the function that's supposed to do the actual toggle. Basically, I'm not sure how to access the array that I've created and change the boolean assignment.

So far in Angular I've created a class “repairs” and in my file app.component.ts I've exported a list of “repairs” in repairList like so…

repairList = [
    new repairs("Front wheel", "out of true",false),
    new repairs("Front hub", "needs tightening", false),
    ...
];

In the app.component.html I've created a button which is supposed to do the toggle…

<button type="button" onclick="addRepair('0', true);">Out of true</button>

which calls a function (which I know has been imported properly)...

function addRepair(here, needed) {
    repairList[here].isNeeded = needed;
}

and later on the page will display data as so…

<div class="col-md-8" id="repairsGoHere" ng-repeat="inst in repairList | filter: {isNeeded:true}">
    <p>{{ inst.area }}</p>
</div>

any advice on how to code the function to get it to do what I'd like? Or should I be approaching this a totally different way?

Thanks for all the help!

Evan

After getting some responses on here y'all helped me figure it out - I was coding in Angular 6 and didn't realize ng-repeat was from the AngularJS-era. Ang 6 doesn't have the same filter features so I'll need to figure out how to achieve the same result as I was seeking. Thanks for all the input!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM