এনজি-পরিবর্তনের সাথে এনজি-অবজেক্ট নির্বাচন করা

Question

নিম্নলিখিত নির্বাচিত উপাদান দেওয়া

<select ng-options="size.code as size.name for size in sizes " 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING)">
</select>

বর্তমানে নির্বাচিত আকারের সমান হওয়ার জন্য কি কি MAGIC_THING পাওয়ার কোনও উপায় আছে, তাই আমার কাছে size.nameএবং size.codeআমার নিয়ামকটিতে আমার অ্যাক্সেস রয়েছে ?

আকারের কোড অ্যাপ্লিকেশনটির অন্যান্য অংশগুলিতে প্রচুর পরিমাণে প্রভাব ফেলে (চিত্র url, ইত্যাদি), তবে যখন এনজি-মডেলটি আপডেট করা হয় তখন ব্যবহারকারীর মুখোমুখি হওয়া সামগ্রীর item.size.codeজন্য আপডেটও করা item.size.nameদরকার। আমি ধরে নিচ্ছি যে এটি করার সঠিক উপায়টি হ'ল পরিবর্তন ইভেন্টটি ক্যাপচার করছে এবং আমার নিয়ামকের ভিতরে মানগুলি নির্ধারণ করছে তবে সঠিক মানগুলি পাওয়ার জন্য আমি আপডেটে কী পাস করতে পারি তা নিশ্চিত নই।

এটি যদি পুরোপুরি ভুল পথে যায় তবে আমি সঠিক উপায়টি জানতে আগ্রহী।

Answer 1

এনজি-মডেলটিকে আইটেম.সাইজ কোডে সেট করার পরিবর্তে কীভাবে এটি আকারে সেট করবেন:

<select ng-options="size as size.name for size in sizes" 
   ng-model="item" ng-change="update()"></select>

তারপরে আপনার update()পদ্ধতিতে, $scope.itemবর্তমানে নির্বাচিত আইটেমে সেট করা হবে।

এবং কোডের যা কিছু দরকার item.size.code, সেই সম্পত্তিটি এর মাধ্যমে পেতে পারেন $scope.item.code।

বেহালার ।

মন্তব্যে আরও তথ্যের ভিত্তিতে আপডেট করুন:

আপনার নির্বাচিত এনজি-মডেলের জন্য আরও কিছু $ স্কোপ সম্পত্তি ব্যবহার করুন:

<select ng-options="size as size.name for size in sizes" 
   ng-model="selectedItem" ng-change="update()"></select>

নিয়ন্ত্রক:

$scope.update = function() {
   $scope.item.size.code = $scope.selectedItem.code
   // use $scope.selectedItem.code and $scope.selectedItem.name here
   // for other stuff ...
}

Comments

আমি যদি আমার মডেলটিকে আইটেম হিসাবে সেট করি, তবে আমি কীভাবে কোনও মানকে বেছে নেব?

— প্যাট্রিক

এটি আপনার মধ্যে রাখুন <select>: এনজি-

— আরআর

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

— প্যাট্রিক

এটা কি সত্য? দেখে মনে হচ্ছে এনজি-পরিবর্তন হ্যান্ডলারটি এনজি-মডেলটি আপডেট হওয়ার আগেই বহিস্কার করা হয়েছে, সুতরাং $ সুযোগ.item.size.code = $ স্কোপ.সलेक्ट করা আইটেম কোড কোড চেষ্টা করা আপনাকে সর্বদা আপডেট হওয়া মডেলের মান দেয় না। এনজি-চেঞ্জ ব্যবহার করার সময় কেউ কি দেখেছেন?

— কার্ল

অনুমান করুন যেহেতু আপনাকে এটি করা থেকে বিরত করার কিছুই নেই:ng-model="selectedItem" ng-change="update(selectedItem)"

— রাইস ভ্যান ডের ওয়েয়ারডেন

Answer 2

আপনি নিম্নলিখিত কোড ব্যবহার করে সরাসরি নির্বাচিত মান পেতে পারেন

 <select ng-options='t.name for t in templates'
                  ng-change='selectedTemplate(t.url)'></select>

script.js

 $scope.selectedTemplate = function(pTemplate) {
    //Your logic
    alert('Template Url is : '+pTemplate);
}

Comments

এই প্রশ্নের উত্তর দেওয়ার সময় গৃহীত ব্যক্তি একটি বিকল্প দেয়

— redben

আপনি কোথায় আরম্ভ বা টেমপ্লেট ভেরিয়েবল পাবেন?

— ক্যাট লিম রুইজ

কোনও মডেল উল্লেখ না করে কি এটি কাজ করে? আমি এই ত্রুটিটি পেয়েছি: নির্দেশক 'সিলেক্ট' দ্বারা প্রয়োজনীয় কন্ট্রোলার 'এনজিমডেল' পাওয়া যায় না!

— ফের

ডকুমেন্টেশন অনুসারে নির্বাচিত উপাদানগুলির জন্য অবশ্যই এনজিএমডেল প্রয়োজনীয়। অন্যান্য নির্দেশাবলী alচ্ছিক, কিন্তু এটি এক নয় one

— মনিমিয়া

এটা কাজ করে না! এনজি-চেঞ্জের এনজি-বিকল্পগুলির অভ্যন্তরে তৈরি অস্থায়ী পরিবর্তনশীল (টি) অ্যাক্সেস নেই।

— আবর্জনা

Answer 3

আপনিও চেষ্টা করে দেখুন:

<select  ng-model="selectedItem" ng-change="update()">
<option ng-repeat="item in items" ng-selected="selectedItem == item.Id" value="{{item.Id}}">{{item.Name}}</option>
</select>

Comments

মানটি ফর্ম্যাট করতে হলে এই সমাধানটি ভাল। শুধু সিলেক্ট অ্যাপ্রোচ ব্যবহার করে আমি মানটি সহজেই ফর্ম্যাট করতে পারি না।

— এমবোকিল

Answer 4

দিব্যেশ রূপওয়ালার উত্তর যদি কাজ না করে (বর্তমান আইটেমটিকে প্যারামিটার হিসাবে পাস করে), তবে দয়া করে onChanged()এই প্লাঙ্কারে ফাংশনটি দেখুন । এটি ব্যবহার করছে this:

http://plnkr.co/edit/B5TDQJ

Answer 5

<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}}          </option>
</select>

Comments

কোনও নির্বাচনে এনজি-রিপিটের পরিবর্তে এনজি-বিকল্পগুলি ব্যবহার করুন।

— জেপসার বার্নার্ডিনো

@ জেপসারবার্নার্ডিনো একসময় আপনার <option>- তে সূক্ষ্ম অ্যাক্সেসের প্রয়োজন, যেমন কিছু বিশেষ / ডিফল্ট বিকল্পগুলি বেছে নেওয়া হোক বা না হোক স্টাইল করুন

— একুশ

Answer 6

//Javascript
$scope.update = function () {
    $scope.myItem;
    alert('Hello');
}

<!--HTML-->
<div class="form-group">
     <select name="name"
             id="id" 
             ng-model="myItem" 
             ng-options="size as size.name for size in sizes"
             class="form-control" 
             ng-change="update()"
             multiple
             required>
     </select>
</div>

যদি আপনি লিখতে চান, নাম, আইডি, ক্লাস, একাধিক, প্রয়োজনীয়, আপনি এইভাবে লিখতে পারেন।

Answer 7

এটি আপনাকে কিছু ধারণা দিতে পারে

.NET C # দেখুন মডেল

public class DepartmentViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

। নেট সি # ওয়েব এপিআই কন্ট্রোলার

public class DepartmentController : BaseApiController
{
    [HttpGet]
    public HttpResponseMessage Get()
    {
        var sms = Ctx.Departments;

        var vms = new List<DepartmentViewModel>();

        foreach (var sm in sms)
        {
            var vm = new DepartmentViewModel()
            {
                Id = sm.Id,
                Name = sm.DepartmentName
            };
            vms.Add(vm);
        }

        return Request.CreateResponse(HttpStatusCode.OK, vms);
    }

}

কৌণিক নিয়ামক:

$http.get('/api/department').then(
    function (response) {
        $scope.departments = response.data;
    },
    function (response) {
        toaster.pop('error', "Error", "An unexpected error occurred.");
    }
);

$http.get('/api/getTravelerInformation', { params: { id: $routeParams.userKey } }).then(
   function (response) {
       $scope.request = response.data;
       $scope.travelerDepartment = underscoreService.findWhere($scope.departments, { Id: $scope.request.TravelerDepartmentId });
   },
    function (response) {
        toaster.pop('error', "Error", "An unexpected error occurred.");
    }
);

কৌণিক টেম্পলেট:

<div class="form-group">
    <label>Department</label>
    <div class="left-inner-addon">
        <i class="glyphicon glyphicon-hand-up"></i>
        <select ng-model="travelerDepartment"
                ng-options="department.Name for department in departments track by department.Id"
                ng-init="request.TravelerDepartmentId = travelerDepartment.Id"
                ng-change="request.TravelerDepartmentId = travelerDepartment.Id"
                class="form-control">
            <option value=""></option>
        </select>
    </div>
</div>

Answer 8

আপনাকে "ট্র্যাক বাই" ব্যবহার করতে হবে যাতে অবজেক্টগুলিকে সঠিকভাবে তুলনা করা যায়। অন্যথায় কৌণিক বস্তুর তুলনার স্থানীয় জেএস উপায় ব্যবহার করবে।

সুতরাং আপনার উদাহরণ কোডটি এতে পরিবর্তিত হবে -

    <select ng-options="size.code as size.name
 for size in sizes track by size.code" 
ng-model="item.size.code"></select>

Answer 9

AngularJS এর ​​ফিল্টারটি আমার জন্য কাজ করেছিল।

code/idএটিকে অনন্য বলে ধরে নিলে আমরা সেই নির্দিষ্ট অবজেক্টটি অ্যাঙ্গুলারজেএস এর সাথে ফিল্টার করতে পারি filterএবং নির্বাচিত বস্তুর বৈশিষ্ট্যগুলির সাথে কাজ করতে পারি। উপরের উদাহরণ বিবেচনা করে:

<select ng-options="size.code as size.name for size in sizes" 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING); search.code = item.size.code">
</select>

<!-- OUTSIDE THE SELECT BOX -->

<h1 ng-repeat="size in sizes | filter:search:true"
    ng-init="search.code = item.size.code">
  {{size.name}}
</h1>

এখন, এটির জন্য 3 টি গুরুত্বপূর্ণ দিক রয়েছে :

1. ng-init="search.code = item.size.code"- বাক্সের h1বাইরের উপাদান সূচনা selectকরার সময়, ফিল্টার ক্যোয়ারিকে নির্বাচিত বিকল্পে সেট করুন ।

2. ng-change="update(MAGIC_THING); search.code = item.size.code"- আপনি যখন সিলেক্ট ইনপুট পরিবর্তন করবেন, আমরা আরও একটি লাইন চালাব যা বর্তমানে নির্বাচিতদের জন্য "অনুসন্ধান" ক্যোয়ারী সেট করবে item.size.code।

3. filter:search:true- কঠোর মিলটিtrue সক্ষম করতে ফিল্টারে পাস করুন ।

এটাই. যদি size.codeহয় uniqueID , আমরা কেবল এক হবে h1এর পাঠ্য সহ উপাদান size.name।

আমি আমার প্রকল্পে এটি পরীক্ষা করেছি এবং এটি কাজ করে।

শুভকামনা

Answer 10

কৌণিক নির্বাচন বিকল্প তালিকা (আইডি বা পাঠ্য ব্যতীত) থেকে মান পাওয়ার এটি সবচেয়ে সহজ উপায়। ধরে নিচ্ছি আপনার পৃষ্ঠায় এই জাতীয় পছন্দ রয়েছে:

<select ng-model="data.ProductId"
        ng-options="product.Id as product.Name for product in productsList"
        ng-change="onSelectChange()">
</select>

তারপরে আপনার নিয়ামকটিতে কলব্যাক ফাংশনটি সেট করুন:

    $scope.onSelectChange = function () {
        var filteredData = $scope.productsList.filter(function (response) {
            return response.Id === $scope.data.ProductId;
        })
        console.log(filteredData[0].ProductColor);
    }

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

তদতিরিক্ত, এনজিএমডেলটি সত্যই আপডেট হওয়ার আগে ইভেন্টটি বহিষ্কার হওয়ার পরে, আপনি অনাকাঙ্ক্ষিত ফলাফল পেতে পারেন, তাই সময়সীমা যুক্ত করার আরও ভাল উপায় হবে:

        $scope.onSelectChange = function () {
            $timeout(function () {
            var filteredData = $scope.productsList.filter(function (response) {
                return response.Id === $scope.data.ProductId;
            })
            console.log(filteredData[0].ProductColor);
            }, 100);
        };