কৌণিক 2 - রেডিও বোতাম বাঁধাই

Question

আমি কৌনিক 2 ব্যবহার করে কোনও ফর্মের মধ্যে রেডিও বোতামটি ব্যবহার করতে চাই

Options : <br/>

1 : <input name="options" ng-control="options" type="radio" value="1"  [(ng-model)]="model.options" ><br/>

2 : <input name="options" ng-control="options" type="radio" value="2" [(ng-model)]="model.options" ><br/>

Model.options প্রারম্ভিক মান 1

পৃষ্ঠাটি লোড হওয়ার পরে প্রথম রেডিও বোতামটি চেক করা হয়নি এবং পরিবর্তনগুলি মডেলটির সাথে আবদ্ধ হয় না

কোন ধারণা ?

Comments

রেডিও গতিশীল তালিকার উদাহরণ এখানে freakyjolly.com/how-to-sho-radio-input-listing-in-angular-6

— কোড স্পাই

Answer 1

ব্যবহারের [VALUE] = "1" এর পরিবর্তে মান = "1"

<input name="options" ng-control="options" type="radio" [value]="1"  [(ngModel)]="model.options" ><br/>

<input name="options" ng-control="options" type="radio" [value]="2" [(ngModel)]="model.options" ><br/>

সম্পাদনা:

যেমন thllbrg দ্বারা পরামর্শ দেওয়া হয়েছে "কৌণিক 2.1+ এর [(ngModel)]পরিবর্তে ব্যবহার করুন [(ng-model)]"

Comments

এনজিও-কন্ট্রোল বৈশিষ্ট্যের উদ্দেশ্য কী? দেখে মনে হচ্ছে সবকিছু বাদ দিয়ে কাজ করে।

— মনসাইনর

কৌনিক 4+ এ আপনার [(ngModel)]পরিবর্তে অবশ্যই ব্যবহার করা উচিত [(ng-model)]। আবার পড়ুন ।

— ক্লাদিও হল্যান্ডা

এটি কেবলমাত্র নতুন মোড যুক্ত করতে কাজ করছে। সম্পাদনা মোডের জন্য কাজ করছে না। কারণ কী তা আমি খুঁজে পেলাম না। মডেল ওয়ার্কিংয়ের জন্য নতুন উন্মুক্ত নির্ধারিত মানটিতে তবে যখন আমি সার্ভার থেকে মানগুলি পুনরুদ্ধার করি এবং স্ক্রিনে দেখি তখন কাজ করি না ut তবে আমি যদি লেবেল মান প্রদর্শন করি তবে পরীক্ষিত না হয়ে কাজ করি।

— বিনোথ কুমার

আমার ক্ষেত্রে, আমি ব্যবহার শেষ value="1" [(ngModel)]="model.options"। valueবর্গাকার বন্ধনীগুলিতে losোকানো কাজ করছে না

— সিলওয়ান ডি অ্যাশ

আজব, তবে আমার ক্ষেত্রেও আমাকে [মান] = "1" এর পরিবর্তে মান = "1" ব্যবহার করতে হয়েছিল। আমি

— কৌনিক

Answer 2

দ্রষ্টব্য - রেডিও বোতাম বাঁধাই এখন আরসি 4 এর পরে একটি সমর্থিত বৈশিষ্ট্য - এই উত্তরটি দেখুন

চেকবক্সকন্ট্রোলভ্যালুএ্যাকসেসরের অনুরূপ কাস্টম রেডিওকন্ট্রোলভ্যালুএ্যাকসেসর ব্যবহার করে রেডিও বোতামের উদাহরণ ( কৌণিক 2 আরসি -1 দিয়ে আপডেট হয়েছে )

App.ts

import {Component} from "@angular/core";
import {FORM_DIRECTIVES} from "@angular/common";
import {RadioControlValueAccessor} from "./radio_value_accessor";
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
    selector: "my-app",
    templateUrl: "template.html",
    directives: [FORM_DIRECTIVES, RadioControlValueAccessor]
})
export class App {

    model;

    constructor() {
        this.model = {
            sex: "female"
        };
    }
}

template.html

<div>
    <form action="">
        <input type="radio" [(ngModel)]="model.sex"  name="sex" value="male">Male<br>
        <input type="radio" [(ngModel)]="model.sex"  name="sex" value="female">Female
    </form>

    <input type="button" value="select male" (click)="model.sex='male'">
    <input type="button" value="select female" (click)="model.sex='female'">
    <div>Selected Radio: {{model.sex}}</div>
</div>

radio_value_accessor.ts

import {Directive, Renderer, ElementRef, forwardRef} from '@angular/core';
import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/common';

export const RADIO_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => RadioControlValueAccessor),
    multi: true
};

@Directive({
   selector:
       'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
   host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
   bindings: [RADIO_VALUE_ACCESSOR]
})
export class RadioControlValueAccessor implements ControlValueAccessor {
   onChange = (_) => {};
   onTouched = () => {};

   constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}

   writeValue(value: any): void {
       this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value);
   }
   registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; }
   registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
}

সূত্র: https://github.com/angular2-school/angular2-radio-button

প্লঙ্কার লাইভ ডেমো: http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p= পূর্বরূপ

Comments

একই ভাবে যে প্রশ্ন প্রাসঙ্গিক কোড অন্তর্ভুক্ত করা উচিত প্রশ্নে খুব, উত্তর উচিত। এটি তাত্ত্বিকভাবে প্রশ্নের উত্তর দিতে পারে তবে ভবিষ্যতের ব্যবহারকারীর জন্য উত্তরের প্রয়োজনীয় অংশগুলি এখানে অন্তর্ভুক্ত করা এবং রেফারেন্সের জন্য লিঙ্ক সরবরাহ করা ভাল। লিঙ্ক-প্রভাবিত উত্তরগুলি লিঙ্ক পচা দিয়ে অবৈধ হতে পারে ।

— মোগসাদাদ

দুর্দান্ত .. এটি আশ্চর্যজনক যে এটি কাঠামোর মধ্যে অন্তর্ভুক্ত করা হয়নি

— মুরাদ জুবাবি

দুর্দান্ত সমাধান! একটি ছোট সংযোজন: আমি সিএসএস ইনপুট ব্যবহার করছি [টাইপ = "রেডিও"]: স্টাইলিংয়ের জন্য যাচাই করা হয়েছে, তবে কেবল _elementRef এর পরিবর্তে _elementRef এর নেটিমেট ব্যবহার করার সময় এটি আমার জন্য কাজ করে: this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value);

— বেস

@ গ্রেগডউডস নতুন পরিবর্তন এবং পোস্টের অনুরোধের জন্য ধন্যবাদ সহ পোস্টটি আপডেট করেছেন

— নিদীন বিনায়াকান

এটি এখন স্থানীয়ভাবে সমর্থিত, কৌনিক

— আরসি 4

Answer 3

আমার ম্যানুয়াল ওয়ার্কআরাউন্ডে, model.optionsযখন নতুন রেডিও বোতামটি নির্বাচন করা হয় তখন ম্যানুয়ালি আপডেট করা জড়িত :

template: `
  <label *ngFor="let item of radioItems">
    <input type="radio" name="options" (click)="model.options = item" 
     [checked]="item === model.options">
    {{item}}
  </label>`

class App {
  radioItems = 'one two three'.split(' ');
  model      = { options: 'two' };
}

এটি Plunkerউপরেরটি প্রদর্শন করে, পাশাপাশি নির্বাচিত রেডিও বোতামটি পরিবর্তন করতে কীভাবে একটি বোতাম ব্যবহার করতে হয় - অর্থাত্ তথ্য বাইন্ডিং দ্বি-মুখী তা প্রমাণ করার জন্য:

<button (click)="model.options = 'one'">set one</button>

Comments

আমার দুটি প্রশ্ন আছে প্রথম: get debug()ফাংশন মানে কি get? দ্বিতীয়টি: চেকবক্সগুলির জন্য এই উত্তরটির মতো কোনও বিকল্প আছে? চেকবাক্সগুলির জন্য কিছু কোড সরবরাহ করুন। দুর্দান্ত উত্তরের জন্য +1 ধন্যবাদ।

— পারদ্বীপ জৈন

@ পারদীপজাইন, getএকটি টাইপস্ক্রিপ্ট অ্যাকসেসর বৈশিষ্ট্য । চেকবক্সগুলির জন্য একটি প্রশ্ন পোস্ট করুন।

— রাজকোক

এই '{{ডিবাগ (এবিসি)}}' এর মতো প্যারামিটারগুলি পাঠানো যাবে?

— পারদীপ জৈন

@ পারদীপজাইন, plnkr.co/edit/iH3Te9EK7Y1dPXMzfWt6?p= পূর্বরূপ দেখুন । আপনি কোনও ফাংশনের মতো সেটারকে কল করতে পারবেন না, Anotherdate('2015-05-18T02:30:56')কাজ করবে না। আপনি কোনও সম্পত্তিতে কোনও মূল্য নির্ধারণের চেষ্টা করার সময় সেটটারদের কল করা হয়। আমার প্লামকারে আমি setDate()\ টুপিতে একটি ফাংশন তৈরি করেছি একটি নতুন তারিখের মান গ্রহণ করে, যা তারপরে নির্ধারিত হয় Anotherdate। এই অ্যাসাইনমেন্টটি স্বয়ংক্রিয়ভাবে সেটারকে কল করবে।

— মার্ক রাজকক

@ পারদীপজাইন, {{}}বাইন্ডিংগুলি প্রতিটি পরিবর্তন সনাক্তকরণ চক্রের পুনরায় মূল্যায়ন করে। ngDoCheck()পরিবর্তনের সনাক্তকরণ চক্র গণনা করার জন্য আমি প্লামকারে অ্যাপকোম্পোনেন্টে প্রয়োগ করেছি । এর থেকে আমরা দেখতে পাই যে পরিবর্তন সনাক্তকরণকে 3 বার বলা হয়। ডেভ মোডে, বাইন্ডিংগুলি দু'বার পরীক্ষা করা হয় , সুতরাং 6 বার।

— মার্ক রাজকক

Answer 4

Angular2 এ রেডিও বোতামগুলি ব্যবহার করার সর্বোত্তম উপায়। বাইন্ডেড প্রোপার্টি মানটি পরিবর্তন করতে (ক্লিক) ইভেন্ট বা রেডিওকন্ট্রোলভ্যালু অ্যাকসেসর ব্যবহার করার দরকার নেই, [চেক করা] সম্পত্তিটি কৌশলটি কার্যকর করে।

<input name="options" type="radio" [(ngModel)]="model.options" [value]="1"
       [checked]="model.options==1" /><br/>
<input name="options" type="radio"  [(ngModel)]="model.options" [value]="2"
       [checked]="model.options==2" /><br/>

আমি রেডিও বোতাম ব্যবহারের একটি উদাহরণ প্রকাশ করেছি: কৌণিক 2: এনাম থেকে রেডিও বোতামগুলি কীভাবে তৈরি করতে হবে এবং দ্বি-মুখী বাইন্ডিং যুক্ত করবেন? এটি কমপক্ষে অ্যাঙ্গুলার 2 আরসি 5 থেকে কাজ করে।

Comments

এটি কেবলমাত্র নতুন মোড যুক্ত করতে কাজ করছে। সম্পাদনা মোডের জন্য কাজ করছে না। কারণ কী তা আমি খুঁজে পেলাম না। মডেল ওয়ার্কিংয়ের জন্য নতুন উন্মুক্ত নির্ধারিত মানটিতে তবে যখন আমি সার্ভার থেকে মানগুলি পুনরুদ্ধার করি এবং স্ক্রিনে দেখি তখন কাজ করি না ut

— বিনোথ কুমার

@ উইনোথকুমার আপনি কি সম্পাদনা মোডের কাজটি পরিচালনা করবেন? আমি একই সমস্যাটি করছি

— ডেভ নোটেজ

Answer 5

এই ইস্যুটি আকারে যথাক্রমে অ্যাঙ্গুলার 2.0.0-rc.4 সংস্করণে সমাধান করা হয়েছে।

"@angular/forms": "0.2.0"প্যাকেজ.জসনে অন্তর্ভুক্ত করুন ।

তারপরে আপনার বুটস্ট্র্যাপটি মূলত প্রসারিত করুন। প্রাসঙ্গিক অংশ:

...
import { AppComponent } from './app/app.component';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

bootstrap(AppComponent, [
    disableDeprecatedForms(),
    provideForms(),
    appRouterProviders
]);

আমার এটি .html এ আছে এবং পুরোপুরি কাজ করে: মান: {{বিল্ডটুল}}

<form action="">
    <input type="radio" [(ngModel)]="buildTool" name="buildTool" value="gradle">Gradle <br>
    <input type="radio" [(ngModel)]="buildTool" name="buildTool" value="maven">Maven
</form>

Comments

এটি আরসি 4 হিসাবে সঠিক উত্তর এবং কেবল যোগ করতে, রেডিওগুলি এনামগুলির সাথে ব্যবহার করা যেতে পারে।

— রন

আরসি running চালিয়ে আমার চারপাশে বন্ধনী স্থাপন করা দরকার [মান]

— ব্রায়ান ভ্যান্ডার প্ল্যাটস

আমার মনে হয় আপনার বন্ধনী প্রয়োজন কারণ আপনার ক্ষেত্রে স্ট্রিংয়ের পরিবর্তে আপনার উপাদানগুলির একটি পরিবর্তনশীল ব্যবহার করা উচিত, আমার ক্ষেত্রে @ জোলসির উত্তরটি ভাল কাজ করেছে!

— বাঘি

সঙ্গে এই অংশ disableDeprecatedFormsএবং provideFormsঐন্দ্রজালিক দেখায় এবং কোন অর্থে দেখা যায় না। এই জিনিসগুলি কি করে? এটি অপ্রয়োজনীয় স্কেল অবিশ্বাস্য জিনিস তৈরি অপ্রয়োজনীয় কোড।

— ঘেরম্যান

Answer 6

আমি এখানে সেই রেডিও বোতামগুলি হ্যান্ডেল করার জন্য সঠিক পদ্ধতিটি সন্ধান করছিলাম এটি এখানে পাওয়া একটি সমাধানের একটি উদাহরণ:

<tr *ngFor="let entry of entries">
    <td>{{ entry.description }}</td>
    <td>
        <input type="radio" name="radiogroup" 
            [value]="entry.id" 
            (change)="onSelectionChange(entry)">
    </td>
</tr>

লক্ষ্য করুন OnSelectionChange বর্তমান উপাদানটিকে পদ্ধতিতে পাস করে।

Answer 7

রেডিও ইনপুটটি এখনও সমর্থিত বলে মনে হচ্ছে না। একটা রেডিও ইনপুট মান অ্যাকসেসর (চেকবক্সটি এর অনুরূপ হওয়া উচিত এক , যেখানে এটি সেট করে 'চেক করা' ATTR এখানে কিন্তু আমি কোনো পাইনি)। সুতরাং আমি একটি বাস্তবায়ন; আপনি এটি এখানে পরীক্ষা করে দেখতে পারেন ।

Comments

তারা এটি বিটা 6 এ যুক্ত করেছে: github.com/angular/angular/blob/master/… github.com/angular/angular/commit/e725542 github.com/angular/angular/commit/8f47aa3

— JimB

@ জিমবি: দুর্ভাগ্যক্রমে এটি প্রদর্শিত হয় এর মূল শব্দটির অর্থ আলাদা ।

— কিয়ারা গ্রুপস্ট্রা

Answer 8

[মান] = "আইটেম" * এনজিফোর্ড ব্যবহার করে কৌণিক 2 এবং 4 এ প্রতিক্রিয়াশীল ফর্মগুলির সাথেও কাজ করে

<label *ngFor="let item of items">
    <input type="radio" formControlName="options" [value]="item">
    {{item}}
</label>`

Comments

সিঙ্গল সিলেক্ট কিভাবে করবেন ??

— বেলটার

Answer 9

নিম্নলিখিতটি আমার সমস্যাটিকে স্থির করেছে, দয়া করে formট্যাগের মধ্যে রেডিও ইনপুট যুক্ত করার বিষয়টি বিবেচনা করুন এবং [value]মানটি প্রদর্শন করতে ট্যাগটি ব্যবহার করুন ।

<form name="form" (ngSubmit)="">
    <div *ngFor="let item of options">
        <input [(ngModel)]="model.option_id" type="radio" name="options" [value]="item.id"> &nbsp; {{ item.name }}
    </div>
</form>

Answer 10

এখানে আমার জন্য কার্যকর একটি সমাধান রয়েছে। এটিতে রেডিও বোতাম বাঁধাই জড়িত - তবে ব্যবসায়ের ডেটা আবদ্ধ নয়, পরিবর্তে, রেডিও বোতামের স্থিতিতে আবদ্ধ। এটি সম্ভবত নতুন প্রকল্পগুলির জন্য সেরা সমাধান নয়, তবে আমার প্রকল্পের জন্য এটি উপযুক্ত। আমার প্রকল্পে একটি ভিন্ন প্রযুক্তিতে লিখিত টোন বিদ্যমান কোড রয়েছে যা আমি কৌনিকটিতে পোর্ট করছি ing পুরানো কোড এমন একটি প্যাটার্ন অনুসরণ করে যাতে কোডটি প্রতিটি রেডিও বোতামটি পরীক্ষা করে দেখার জন্য আগ্রহী যে এটি নির্বাচিত একটি কিনা one সমাধানটি ক্লিক হ্যান্ডলার সমাধানগুলির একটি প্রকরণ, যার কয়েকটি ইতিমধ্যে স্ট্যাক ওভারফ্লোতে উল্লিখিত হয়েছে। এই সমাধানটির যোগ হওয়া মানটি হ'ল:

1. আমার সাথে কাজ করতে হবে এমন পুরানো কোডের ধরণ নিয়ে কাজ করে।
2. ক্লিক হ্যান্ডলারের "যদি" স্টেটমেন্টের সংখ্যা হ্রাস করার চেষ্টা করতে এবং রেডিও বোতামগুলির যে কোনও গ্রুপকে পরিচালনা করার জন্য আমি একটি সহায়ক শ্রেণি তৈরি করেছি।

এই সমাধান জড়িত

1. প্রতিটি রেডিও বোতামের জন্য আলাদা মডেল ব্যবহার করা।
2. রেডিও বোতামের মডেলটির সাথে "পরীক্ষিত" বৈশিষ্ট্যটি সেট করা।
3. ক্লিক করা রেডিও বোতামটির মডেলটিকে সহায়ক শ্রেণিতে পাস করা।
4. সহায়ক শ্রেণিগুলি নিশ্চিত করে যে মডেলগুলি আপ টু ডেট makes
5. "জমা দেওয়ার সময়" এ এটি পুরানো কোডটিকে রেডিও বোতামগুলির অবস্থা যাচাই করে দেখতে দেয় যে মডেলগুলি পরীক্ষা করে কোনটি নির্বাচন করা হয়েছে।

উদাহরণ:

<input type="radio"
    [checked]="maleRadioButtonModel.selected"
    (click)="radioButtonGroupList.selectButton(maleRadioButtonModel)"

...

 <input type="radio"
    [checked]="femaleRadioButtonModel.selected"
    (click)="radioButtonGroupList.selectButton(femaleRadioButtonModel)"

...

যখন ব্যবহারকারী কোনও রেডিও বোতাম ক্লিক করেন, তখন সহায়ক সহায়ক শ্রেণীর সিলেক্ট বাটন পদ্ধতিটি চাওয়া হয়। এটি ক্লিক করা রেডিও বোতামের মডেলটি পাস করেছে। সহায়ক শ্রেণিটি মডেল উত্তীর্ণের বুলিয়ান "নির্বাচিত" ক্ষেত্রটিকে সত্য হিসাবে সেট করে এবং অন্য সমস্ত রেডিও বোতামের মডেলগুলির "নির্বাচিত" ক্ষেত্রটিকে মিথ্যাতে সেট করে।

আরম্ভের সময় অংশটি অবশ্যই গ্রুপের সমস্ত রেডিও বোতামের মডেলগুলির একটি তালিকা সহ সহায়ক শ্রেণীর একটি উদাহরণ তৈরি করবে। উদাহরণস্বরূপ, "রেডিওবটনগ্রুপলিস্ট" হ'ল সহায়ক শ্রেণীর উদাহরণ হতে পারে যার কোড:

 import {UIButtonControlModel} from "./ui-button-control.model";


 export class UIRadioButtonGroupListModel {

  private readonly buttonList : UIButtonControlModel[];
  private readonly debugName : string;


  constructor(buttonList : UIButtonControlModel[], debugName : string) {

    this.buttonList = buttonList;
    this.debugName = debugName;

    if (this.buttonList == null) {
      throw new Error("null buttonList");
    }

    if (this.buttonList.length < 2) {
      throw new Error("buttonList has less than 2 elements")
    }
  }



  public selectButton(buttonToSelect : UIButtonControlModel) : void {

    let foundButton : boolean = false;
    for(let i = 0; i < this.buttonList.length; i++) {
      let oneButton : UIButtonControlModel = this.buttonList[i];
      if (oneButton === buttonToSelect) {
        oneButton.selected = true;
        foundButton = true;
      } else {
        oneButton.selected = false;
      }

    }

    if (! foundButton) {
      throw new Error("button not found in buttonList");
    }
  }
}

Answer 11

কৌণিক 8 রেডিও তালিকা উদাহরণ:

উত্স লিঙ্ক

জেএসওএন প্রতিক্রিয়া

    [
            {
                "moduleId": 1,
                "moduleName": "Employee",
                "subModules":[
                    {
                        "subModuleId": 1,
                        "subModuleName": "Add Employee",
                        "selectedRightType": 1,
                    },{
                        "subModuleId": 2,
                        "subModuleName": "Update Employee",
                        "selectedRightType": 2,
                    },{
                        "subModuleId": 3,
                        "subModuleName": "Delete Employee",
                        "selectedRightType": 3,
                    }
                ]
            },  
            {
                "moduleId": 2,
                "moduleName": "Company",
                "subModules":[
                    {
                        "subModuleId": 4,
                        "subModuleName": "Add Company",
                        "selectedRightType": 1,
                    },{
                        "subModuleId": 5,
                        "subModuleName": "Update Company",
                        "selectedRightType": 2,
                    },{
                        "subModuleId": 6,
                        "subModuleName": "Delete Company",
                        "selectedRightType": 3,
                    }
                ]
            },  
            {
                "moduleId": 3,
                "moduleName": "Tasks",
                "subModules":[
                    {
                        "subModuleId": 7,
                        "subModuleName": "Add Task",
                        "selectedRightType": 1,
                    },{
                        "subModuleId": 8,
                        "subModuleName": "Update Task",
                        "selectedRightType": 2,
                    },{
                        "subModuleId": 9,
                        "subModuleName": "Delete Task",
                        "selectedRightType": 3,
                    }
                ]
            }
    ]

এইচটিএমএল টেমপ্লেট

        <div *ngFor="let module of modules_object">
            <div>{{module.moduleName}}</div>
            <table width="100%">

                <thead>
                    <tr>
                        <th>Submodule</th>
                        <th>
                            <input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="1"> Read Only
                        </th>
                        <th>
                            <input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="2"> Read Write
                        </th>
                        <th>
                            <input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="3"> No Access
                        </th>
                    </tr>
                </thead>

                <tbody>
                    <tr *ngFor="let sm of module.subModules">
                        <td>{{sm.subModuleName}}</td>
                        <td>
                            <input type="radio" [checked]="sm.selectedRightType == '1'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="1"> 
                        </td>
                        <td class="cl-left">
                            <input type="radio" [checked]="sm.selectedRightType == '2'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="2"> 
                        </td>
                        <td class="cl-left">
                            <input type="radio" [checked]="sm.selectedRightType == '3'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="3"> 
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

Answer 12

সবচেয়ে সহজ সমাধান এবং কার্যনির্বাহী:

<input name="toRent" type="radio" (click)="setToRentControl(false)">
<input name="toRent" type="radio" (click)="setToRentControl(true)">

setToRentControl(value){
    this.vm.toRent.updateValue(value);
    alert(value); //true/false
}

Comments

এই ক্ষেত্রে আপনি কীভাবে প্রথম থেকেই ডিফল্ট মানটিতে একটি রেডিও বোতাম সেট করবেন?

— এরিকস

এছাড়াও এমন পরিস্থিতি তৈরি হবে যেখানে ব্যবহারকারীরা ঘন ঘন পছন্দ পরিবর্তন করেন, প্রতি চেকের জন্য প্রতিটি ফাংশন উপস্থিত থাকবে,

— ব্ল্যাকহাক

Answer 13

আমি লোড হওয়া উপাদানগুলির উপর একটি ক্লিক ইভেন্ট ব্যবহার করে নির্বাচনের মান "getSelection" ফাংশনে এবং মডেলটি আপডেট করে একটি সংস্করণ তৈরি করেছি।

আপনার টেমপ্লেটে:

<ul>
     <li *ngFor="let p of price"><input type="radio" name="price"      (click)="getValue(price.value)" value="{{p}}" #price> {{p}} 
     </li>
</ul>

তোমার শ্রেণী:

export class App {

  price:string;

  price = ["1000", "2000", "3000"];

  constructor() {   }

  model = new SomeData(this.price);

  getValue(price){
    this.model.price = price;
  }
}

উদাহরণ দেখুন: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

Answer 14

আপনার উত্তর ব্যবহারের উপর নির্ভর করে এই উত্তরটি যতটা সেরা নাও হতে পারে, তা কার্যকর হয়। কোনও পুরুষ এবং মহিলা নির্বাচনের জন্য রেডিও বোতামটি ব্যবহার না <select> </select>করে, সংরক্ষণ এবং সম্পাদনা উভয়ের জন্য নিখুঁতভাবে কাজগুলি ব্যবহার করে ।

<select formControlName="gender" name="gender" class="">
  <option value="M">Male</option>
  <option value="F">Female</option>
</select>

উপরেরগুলি সাথে ফর্মগ্রুপ ব্যবহার করে সম্পাদনা করার জন্য ঠিকঠাক করা উচিত patchValue। তৈরি করার জন্য, আপনি এর [(ngModel)]পরিবর্তে ব্যবহার করতে পারেন formControlName। এখনো কাজ করে.

নদীর গভীরতানির্ণয় কাজটি একটি রেডিও বোতামের সাথে জড়িত, আমি তার পরিবর্তে নির্বাচনের সাথে যেতে বেছে নিই। দৃষ্টিভঙ্গি এবং ইউএক্স-বুদ্ধিমান, এটি সেরা বলে মনে হয় না তবে বিকাশকারীর দৃষ্টিকোণ থেকে এটি আরও সহজ ton

Answer 15

রেডিও বোতাম পরিবর্তন এ এই লাইন সঙ্গে সংশ্লিষ্ট বোতামের মান পেতে

<label class="radio-inline">
<input class="form-check-input" type="radio" [(ngModel)]="dog" name="cat"  checked (change)="onItemChange($event)" value="Dog" />Dog</label>
<label class="radio-inline">
<input class="form-check-input" type="radio" [(ngModel)]="cat" name="cat"   (change)="onItemChange($event)" value="Cat"  />Cat</label>

https://stackblitz.com/edit/angular-jpo2dm?embed=1&file=src/app/app.component.html

Answer 16

এখানে আমি ব্যবহার করি এমন কয়েকটি কোড যা কৌনিক 7 এর সাথে কাজ করে

(দ্রষ্টব্য: অতীতে আমি মাঝে মাঝে অ্যান্টনি ব্রেনেলিয়ারের উত্তর দ্বারা সরবরাহিত তথ্য ব্যবহার করতাম, যা আমি প্রশংসা করি But তবে কমপক্ষে অ্যাঙ্গুলার 7 এর জন্য এই অংশটি:

 [checked]="model.options==2"

আমি অপ্রয়োজনীয় বলে মনে করি))

আমার সমাধানটি এখানে তিনটি সুবিধা রয়েছে:

1. সর্বাধিক প্রস্তাবিত সমাধানগুলির সাথে সামঞ্জস্যপূর্ণ। সুতরাং এটি নতুন প্রকল্পগুলির জন্য ভাল।
2. রেডিও বোতাম কোডটি ফ্লেক্স / অ্যাকশনস্ক্রিপ্ট কোডের মতো হতে দেয়। এটি ব্যক্তিগতভাবে গুরুত্বপূর্ণ কারণ আমি ফ্লেক্স কোডটি কৌণিক ভাষায় অনুবাদ করছি। ফ্লেক্স / অ্যাকশনস্ক্রিপ্ট কোডের মতো এটি কোডটি কোনও রেডিও বোতামের অবজেক্টে চেক বা আনচেক বা রেডিও বোতামটি চেক করা হয়েছে কিনা তা খুঁজে বের করতে সহায়তা করে।
3. আপনি দেখতে পাবেন বেশিরভাগ সমাধানের থেকে পৃথক, এটি খুব অবজেক্ট ভিত্তিক। একটি সুবিধা হ'ল সংগঠন: এটি একটি রেডিও বোতামের ডেটা বাইন্ডিং ক্ষেত্রগুলিকে একত্রিত করে, যেমন নির্বাচিত, সক্ষম, দৃশ্যমান এবং সম্ভবত অন্যান্য।

এইচটিএমএল উদাহরণ:

       <input type="radio" id="byAllRadioButton"
                 name="findByRadioButtonGroup"
                 [(ngModel)]="findByRadioButtonGroup.dataBindingValue"
                 [value]="byAllRadioButton.MY_DATA_BINDING_VALUE">         

      <input type="radio" id="byNameRadioButton"
                 name="findByRadioButtonGroup" 
                 [(ngModel)]="findByRadioButtonGroup.dataBindingValue"
                 [value]="byNameRadioButton.MY_DATA_BINDING_VALUE">

টাইপস্ক্রিপ্ট উদাহরণ:

 findByRadioButtonGroup : UIRadioButtonGroupModel
    = new UIRadioButtonGroupModel("findByRadioButtonGroup",
                                  "byAllRadioButton_value",
                                  (groupValue : any) => this.handleCriteriaRadioButtonChange(groupValue)
                                  );

  byAllRadioButton : UIRadioButtonControlModel
    = new UIRadioButtonControlModel("byAllRadioButton",
    "byAllRadioButton_value",
    this.findByRadioButtonGroup) ;

  byNameRadioButton : UIRadioButtonControlModel
    = new UIRadioButtonControlModel("byNameRadioButton",
    "byNameRadioButton_value",
    this.findByRadioButtonGroup) ;



  private handleCriteriaRadioButtonChange = (groupValue : any) : void => {

    if ( this.byAllRadioButton.selected ) {

      // Do something

    } else if ( this.byNameRadioButton.selected ) {

      // Do something

    } else {
      throw new Error("No expected radio button selected");
    }
  };

দুটি ক্লাস ব্যবহৃত হয়:

রেডিও বোতাম গ্রুপ শ্রেণি:

export class UIRadioButtonGroupModel {


  private _dataBindingValue : any;


  constructor(private readonly debugName : string,
              private readonly initialDataBindingValue : any = null,   // Can be null or unspecified
              private readonly notifyOfChangeHandler : Function = null       // Can be null or unspecified
  ) {

    this._dataBindingValue = initialDataBindingValue;
  }


  public get dataBindingValue() : any {

    return this._dataBindingValue;
  }


  public set dataBindingValue(val : any) {

    this._dataBindingValue = val;
    if (this.notifyOfChangeHandler != null) {
      MyAngularUtils.callLater(this.notifyOfChangeHandler, this._dataBindingValue);
    }
  }



  public unselectRadioButton(valueOfOneRadioButton : any) {

    //
    // Warning: This method probably never or almost never should be needed.
    // Setting the selected radio button to unselected probably should be avoided, since
    // the result will be that no radio button will be selected.  That is
    // typically not how radio buttons work.  But we allow it here.
    // Be careful in its use.
    //

    if (valueOfOneRadioButton == this._dataBindingValue) {
      console.warn("Setting radio button group value to null");
      this.dataBindingValue = null;
    }
  }

};

রেডিও বোতাম ক্লাস

export class UIRadioButtonControlModel {


  public enabled : boolean = true;
  public visible : boolean = true;


  constructor(public readonly debugName : string,
              public readonly MY_DATA_BINDING_VALUE : any,
              private readonly group : UIRadioButtonGroupModel,
              ) {

  }


  public get selected() : boolean {

    return (this.group.dataBindingValue == this.MY_DATA_BINDING_VALUE);
  }


  public set selected(doSelectMe : boolean) {

    if (doSelectMe) {
      this.group.dataBindingValue = this.MY_DATA_BINDING_VALUE;
    } else {
      this.group.unselectRadioButton(this.MY_DATA_BINDING_VALUE);
    }
  }

}

Answer 17

এটি সঠিক সমাধান নাও হতে পারে তবে এটি একটি বিকল্পও আশা করি এটি কাউকে সহায়তা করবে।

এখনও অবধি আমি নীচের মতো (ক্লিক) পদ্ধতি ব্যবহার করে রেডিওব্যাটনের মূল্য পেয়েছি:

<input type="radio" name="options" #male (click)="onChange(male.value)">Male
<input type="radio" name="options" #female (click)="onChange(female.value)">Female

এবং .ts ফাইলে আমি পূর্বনির্ধারিত ভেরিয়েবলের মান গেটরের মান হিসাবে সেট করেছিলাম onChange ফাংশনের ।

কিন্তু অনুসন্ধানের পর আমি দেখেছি ভাল পদ্ধতি আমি এখনো চেষ্টা have't কিন্তু এই এক ভাল ব্যবহার বলে মনে হয় [(ng-model)]লিঙ্কটি এখানে GitHub থেকে এখানে । RadioControlValueAccessorএটি রেডিওর পাশাপাশি চেকবক্সের জন্যও ব্যবহার করছে। এই পদ্ধতির জন্য এখানে কাজ করছে # plnkr # ।