एनजी-ऑब्जेक्ट को एनजी-परिवर्तन के साथ चुना जा रहा है

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मेरे नियंत्रक में पहुंच है ?

size.code ऐप के अन्य भागों (छवि urls, आदि) को बहुत प्रभावित करता है, लेकिन जब एनजी-मॉडल item.size.codeको अपडेट item.size.nameकिया जाता है, तो उपयोगकर्ता को सामान का सामना करने के लिए भी अपडेट किया जाना चाहिए। मुझे लगता है कि ऐसा करने का सही तरीका परिवर्तन घटना पर कब्जा कर रहा है और मेरे नियंत्रक के अंदर मान सेट कर रहा है, लेकिन मुझे यकीन नहीं है कि मैं उचित मूल्यों को प्राप्त करने के लिए अपडेट में क्या पारित कर सकता हूं।

यदि इसके बारे में जाने के लिए यह पूरी तरह से गलत तरीका है, तो मुझे सही तरीका जानना अच्छा लगेगा।

Answer 1

इसके बजाय एनजी-मॉडल को item.size.code पर सेट करने के बजाय, इसे आकार में कैसे सेट किया जाए:

<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>: एनजी-

— इनिट

आपकी मदद के लिए बहुत-बहुत धन्यवाद, लेकिन मुझे नहीं लगता कि मैंने इस स्थिति से काफी कुछ साझा किया है। आइटम एक ऑब्जेक्ट है जो पेज लोड बनाया जाता है। वस्तुओं का आकार सरणी में एक संपादन बटन के साथ उपयोगकर्ता के संपर्क में आता है, इसलिए यदि मैं ऐसा करता हूं तो यह संपूर्ण आइटम ऑब्जेक्ट को ओवरराइड करेगा। मुझे एक चुनिंदा बॉक्स में विकल्पों का एक गुच्छा बनाने का एक तरीका चाहिए जो डेटा ऑब्जेक्ट के पूरी तरह से अलग भाग से एक मूल्य को preselect करता है।

— पैट्रिक

क्या ये सच है? ऐसा लगता है कि एनजी-मॉडल के अपडेट होने से पहले एनजी-चेंज हैंडलर निकाल दिया जाता है, इसलिए $ गुंजाइश की कोशिश कर रहा है। क्या किसी ने देखा है कि एनजी-परिवर्तन का उपयोग करते समय?

— कार्ल

लगता है कि आपको ऐसा करने से कुछ भी नहीं रोक रहा है:ng-model="selectedItem" ng-change="update(selectedItem)"

— Rhys van der Waerden

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

आप टेम्पलेट वेरिएबल को इनिशियलाइज़ या प्राप्त कहाँ करते हैं?

— कैट लिम रुइज़

क्या यह एक मॉडल को निर्दिष्ट किए बिना काम करता है? मुझे यह त्रुटि मिली: नियंत्रक 'एनकोमॉडल', जिसे निर्देशन 'चयन' की आवश्यकता है, नहीं मिल सकता है!

— फेर

डॉक्यूमेंट के अनुसार, चुनिंदा तत्वों के लिए ngModel की आवश्यकता है। अन्य निर्देश वैकल्पिक हैं, लेकिन यह एक नहीं है।

— 21-30 बजे mnemia

यह काम नहीं करता! एनजी-चेंज में एनजी-ऑप्शंस के अंदर बनाए गए अस्थायी वेरिएबल (टी) तक पहुंच नहीं है।

— कचरा

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

यह समाधान अच्छा है यदि आपको मूल्य को प्रारूपित करने की आवश्यकता है। केवल चुनिंदा दृष्टिकोण का उपयोग करके मैं आसानी से मूल्य को प्रारूपित नहीं कर सकता।

— mbokil

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

एक चयन में एनजी-दोहराने के बजाय एनजी-विकल्प का उपयोग करें।

— जेपर बर्नार्डिनो

@JepserBernardino को कुछ समय के लिए आपको <विकल्प> के लिए बेहतर पहुँच की आवश्यकता होती है, उदाहरण के लिए कुछ विशेष / डिफ़ॉल्ट विकल्पों की शैली की परवाह किए बिना कि वे चुने गए हैं या नहीं

— Ekus

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; }
}

.NET C # वेब एप कंट्रोलर

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

आपको "ट्रैक बाय" का उपयोग करने की आवश्यकता है ताकि वस्तुओं की तुलना सही ढंग से की जा सके। अन्यथा कोणीय वस्तुओं की तुलना करने के मूल js तरीके का उपयोग करेगा।

तो आपका उदाहरण कोड बदल जाएगा -

    <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है अद्वितीय है, हम AngularJS के साथ उस विशेष वस्तु को फ़िल्टर कर सकते 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);
        };