कोणीयजेएस - रेडियो इनपुट के सेट बनाने के लिए एनजी-दोहराव का उपयोग

मैं भविष्य की परियोजना के लिए कोणीय का मूल्यांकन कर रहा हूं। मुझे एक चीज करने की आवश्यकता होगी जिसमें उचित "पृष्ठ" रेडियो इनपुट चुनकर "चैनल" जानकारी के विभिन्न पृष्ठ प्रदर्शित होंगे। इसके अलावा, पेज बटन की श्रेणियां भी "पेज सेट" रेडियो इनपुट के समूह से चुनी जा सकती हैं।कोणीयजेएस - रेडियो इनपुट के सेट बनाने के लिए एनजी-दोहराव का उपयोग

नीचे दिए गए कार्य उदाहरण में "चैनल" और "पृष्ठ" रेडियो इनपुट के संयोजन के माध्यम से चैनलों के दृश्य समूह के साथ 32 चैनलों का एक सेट है, जिसमें प्रत्येक 4 चैनलों के कुल 2 * 4 पृष्ठ दिए गए हैं।

<!doctype html> 
<html ng-app> 
    <head> 
    <script type="text/javascript" src="angular.js"></script> 
    <script type="text/javascript"> 
     function Channels($scope) { 
     $scope.groupSize = 4; 
     $scope.pageSet = 0; 
     $scope.pageNumber = 0; 
     $scope.channels = [ 
      {"id": "Ch-001"}, {"id": "Ch-002"}, {"id": "Ch-003"}, {"id": "Ch-004"}, 
      {"id": "Ch-005"}, {"id": "Ch-006"}, {"id": "Ch-007"}, {"id": "Ch-008"}, 
      {"id": "Ch-009"}, {"id": "Ch-010"}, {"id": "Ch-011"}, {"id": "Ch-012"}, 
      {"id": "Ch-013"}, {"id": "Ch-014"}, {"id": "Ch-015"}, {"id": "Ch-016"}, 
      {"id": "Ch-017"}, {"id": "Ch-018"}, {"id": "Ch-019"}, {"id": "Ch-020"}, 
      {"id": "Ch-021"}, {"id": "Ch-022"}, {"id": "Ch-023"}, {"id": "Ch-024"}, 
      {"id": "Ch-025"}, {"id": "Ch-026"}, {"id": "Ch-027"}, {"id": "Ch-028"}, 
      {"id": "Ch-029"}, {"id": "Ch-030"}, {"id": "Ch-031"}, {"id": "Ch-032"} 
     ]; 
     } 
    </script> 
    </head> 

    <body ng-controller="Channels"> 
    <p>Set: 
     <input type="radio" name="pageSet" ng-model="pageSet" ng-value="0">1-4</input> 
     <input type="radio" name="pageSet" ng-model="pageSet" ng-value="1">5-8</input> 
    </p> 
    <p>Page: 
     <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="0">{{pageSet * groupSize + 1}}</input> 
     <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="1">{{pageSet * groupSize + 2}}</input> 
     <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="2">{{pageSet * groupSize + 3}}</input> 
     <input type="radio" name="pageNumber" ng-model="pageNumber" ng-value="3">{{pageSet * groupSize + 4}}</input> 
    </p> 
    <ul> 
     <li ng-repeat="channel in channels | limitTo: groupSize * ((groupSize * pageSet) + pageNumber + 1) | limitTo: -groupSize"> 
     <p>{{channel.id}}</p> 
     </li> 
    </ul> 
    </body> 
</html>

मेरा प्रश्न ng-repeat का उपयोग कर पृष्ठ/पेज सेट रेडियो आदानों बनाने का तरीका है। मैं इस तरह के रूप दृष्टिकोण की कोशिश की है:

<p>Set: <input ng-repeat="n in [0,1]" type="radio" name="pageSet" ng-model="pageSet" ng-value="{{n}}"></p> 
<p>Page: <input ng-repeat="n in [0,1,2,3]" type="radio" name="pageNumber" ng-model="pageNumber" ng-value="{{n}}"></p>

जो सही लगता है, लेकिन मान संबंधित pageSet/PAGENUMBER चर करने के लिए बाध्य नहीं है। क्या कोई बता सकता है कि मैं यहाँ क्या खो रहा हूं?

स्रोत

2013-02-08 SimonSparks

163

एनजी-दोहराने एक बच्चे गुंजाइश बनाते हैं, तो आप $ माता-पिता के लिए बाध्य करने के लिए है:

यहाँ एक बेला है: http://jsfiddle.net/g/r9MLe/2/

नमूना:

<p>Set: 
     <label ng-repeat="n in [0,1]"> 
     <input type="radio" name="pageSet" ng-model="$parent.pageSet" ng-value="n" />{{n}} 
     </label> 
    </p> 
    <p>Page: 
     <label ng-repeat="n in [0,1,2,3]"> 
     <input type="radio" name="pageNumber" ng-model="$parent.pageNumber" ng-value="n" /> {{n}} 
     </label> 
    </p>

स्रोत

2013-02-08 15:46:40 Guillaume86

+11

कोई बात नहीं, एक और वैकल्पिक हल एक नेस्टेड संपत्ति, जावास्क्रिप्ट मूलरूप विरासत के साथ, उदाहरण के लिए pager.pageSet और pager.pageNumber की तरह उपयोग करने के लिए है यह ऑब्जेक्ट को $ पेरेंट स्कोप पर संशोधित करेगा। – Guillaume86

अच्छा, धन्यवाद। मैंने वास्तव में एक अलग नियंत्रक के तहत पेजर चर डालने का विकल्प चुना ताकि मैं कार्यक्षमता को डुप्लिकेट कर सकूं और चैनल डेटा साझा कर सकूं। – SimonSparks

यदि आप आयनिक ढांचे का उपयोग कर रहे हैं, तो आपको ऑब्जेक्ट स्क्रॉल करने के लिए $ पैरेंट पॉइंट के रूप में $ पैरेंट का उपयोग करना होगा। – Tukkan

क्या सिर्फ एक का उपयोग कर के साथ गलत क्या है JSON से मूल्य?

 <table> 
      <tr ng-repeat="v in partneradd.verifications"> 
      <td>{{v.label}}</td> 
      <td> 
       <div class="radio-inline"> 
       <label> 
        <input type="radio" name="{{v.value}}" value="required"> Required 
       </label> 
       </div> 
      </td> 
      <td> 
       <div class="radio-inline"> 
       <label> 
        <input type="radio" name="{{v.value}}" value="optional"> Optional 
       </label> 
       </div> 
      </td> 
      </tr> 
     </table>

डेटा से

vm.verifications = [ 
{ 
    "label" : "Valid last line (USPS only)", 
    "value" : "vll", 
    "type" : "optional" 
}, 
{ 
    "label" : "Domestic recipient", 
    "value" : "dr", 
    "type" : "optional" 
}, 
];

स्रोत

2015-02-23 14:41:55 Steve

यह सरल उदाहरण है। उम्मीद है कि सब कुछ स्पष्ट है।

पैरामीटर name रेडियो बटन में अनिवार्य है (क्षमता के लिए समूह से एक बटन की जांच करें)।

एचटीएमएल:

<form name="myForm" ng-controller="MyCtrl"> 
    <p>Favorite Beatle</p> 
    <ul> 
     <li ng-repeat="person in people"> 
      <label> 
       <input type="radio" ng-model="$parent.name" name="name" value="{{person.name}}" required />{{person.name}} 
      </label> 
     </li> 
    </ul> 
    <p><tt>myForm.$invalid: {{myForm.$invalid}}</tt></p> 
    <button ng-disabled="myForm.$invalid">Submit</button> 
</form>

जावास्क्रिप्ट:

function MyCtrl($scope) { 
    $scope.people = [{ 
     name: "John" 
    }, { 
     name: "Paul" 
    }, { 
     name: "George" 
    }, { 
     name: "Ringo" 
    }]; 
}

स्रोत

2016-11-09 15:36:37

कोणीयजेएस - रेडियो इनपुट के सेट बनाने के लिए एनजी-दोहराव का उपयोग

उत्तर

संबंधित मुद्दे