alpine js repeater

Add Answer

Hosam Aldeen answered on August 9, 2022 Popularity 6/10 Helpfulness 10/10

answer alpine js repeater

related alpine js repeat

related How to Create a Service for API Calls? angular

related usage in component angular

related how to implement two way binding in angular

alpine js repeater

Comment

<div x-data="newEvent()" class=' w-50' >
    <template x-for="(field, i) in fields" :key="i"  >        
        <div class='row m-0 mb-1'>
            <div class='col-11'>
               <input type="hidden" 
                    :name="`values[${i}][id]`" 
                    x-model='field.id'>

                <input  x-model="field.name"
                class="form-control d-inline-block"
                :name="`values[${i}][name]`"
                />         
            </div>
            <div class='col-1'>
                <button type="button" class='btn btn-danger'
                    @click.prevent="removeField(i)">&times;</button>        
            </div>
        </div>
    </template>
	<button type="button" class="btn btn-success" @click.prevent="addNewField()">+</button>


<script>
    function newEvent() {
        return {
            fields: [[]],
            addNewField() {
                this.fields.push({});
            },
            removeField(index) {
                this.fields.splice(index, 1);
            }
        }
    }
</script>

</div>

Popularity 6/10 Helpfulness 10/10 Language javascript

Source: Grepper

Tags: javascript repeater

Link to this answer
Share Copy Link

Contributed on Aug 09 2022

Hosam Aldeen

0 Answers Avg Quality 2/10

Closely Related Answers

alpine js repeat

Comment

<div x-data="newEvent()" class=' w-100' >
    <template x-for="(field, i) in fields" :key="i"  >
        <div class='row m-0 mb-1'>
            <div class='col-4'>
                <label for="">Title</label>
                <input x-model="field.title" :name="`images[${i}][title]`"
                    class="form-control d-inline-block" />
            </div>
            <div class='col-4'>
                <label for="">Link</label>
                <input x-model="field.link" :name="`images[${i}][link]`"
                    class="form-control d-inline-block" />
            </div>
            <div class='col-3'>
                <input type="hidden" :name="`images[${i}][image]`" x-model='field.image'>

                <label for="">Image</label>
                <input type="file" :name="`images[${i}][image]`"
                    class="form-control alpin-image">

                <img :src='`../uploads/${field.image}`' width='100' >

            </div>


            <div class='col-1'>
                <button type="button" class='btn btn-danger' style='margin-top: 29px;'
                    @click.prevent="removeField(i)">&times;</button>
            </div>
        </div>
    </template>
    <div class='row m-0 mb-1'>
        <div class='col-4'>
            <button type="button" class="btn btn-success" @click.prevent="addNewField()">+</button>
        </div>
    </div>

@push('footer')
@php
    $values = (is_array($model->images) && !empty($model->images))?$model->images:[[]];
@endphp
<script>
    function newEvent() {
        return {
            fields: @json($values),
            addNewField() {
                this.fields.push({});
            },
            removeField(index) {
                this.fields.splice(index, 1);
            }
        }
    }

    $(document).on('change', '.alpin-image', function() {
        var me = $(this) ;
        var file = $(this).get(0).files[0];
        console.log(file);
        if(file){
            var reader = new FileReader();
            reader.onload = function(){
                me.parent().find('img').attr("src", reader.result);
            }

            reader.readAsDataURL(file);
        }
    })

</script>
@endpush

</div>

Popularity 5/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: repeat javascript repeater

Link to this answer
Share Copy Link

Contributed on Nov 08 2023

Hosam Aldeen

0 Answers Avg Quality 2/10

How to Create a Service for API Calls? angular

Comment

// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: angular javascript api service

Link to this answer
Share Copy Link

Contributed on Dec 09 2024

TAKUNDA

0 Answers Avg Quality 2/10

usage in component angular

Comment

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  template: `<ul><li *ngFor="let user of users">{{ user.name }}</li></ul>`,
})
export class AppComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe((data) => (this.users = data));
  }
}

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript angular

Link to this answer
Share Copy Link

Contributed on Dec 09 2024

TAKUNDA

0 Answers Avg Quality 2/10

how to implement two way binding in angular

Comment

<!-- app.component.html -->
<input [(ngModel)]="name" placeholder="Enter your name" />
<p>Hello, {{ name }}!</p>
------------------------------------------------------------------------
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  name: string = '';
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: angular javascript two-way-binding

Link to this answer
Share Copy Link

Contributed on Dec 09 2024

TAKUNDA

0 Answers Avg Quality 2/10

alpine js repeater

Contents

More Related Answers

alpine js repeater

Closely Related Answers

alpine js repeat

How to Create a Service for API Calls? angular

usage in component angular

how to implement two way binding in angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.