angularjs: radyo düğmeleri listesine Bağlama ng model

Im bir ng-modelangularjs: radyo düğmeleri listesine Bağlama ng model

radyo düğmeleri listesinden seçilen değeri bağlamaya çalışırken ben: my denetleyicisi için

<!DOCTYPE html> 

<html ng-app="testApp"> 
    <head> 
     <script src="./bower_components/angular/angular.min.js"></script> 
     <script src="test.js"></script> 
    </head> 
    <body ng-controller="testController"> 
     <form> 
      <div ng-repeat="option in occurrenceOptions"> 
       <input type="radio" name="occurrence" ng-value="option" ng-model="selectedOccurrence" /><label>{{ option }}</label> 
      </div> 
     </form> 
     <div>The selected value is : {{ selectedOccurrence }}</div> 

     <!-- This works --> 
     <input type="radio" ng-model="selected2" ng-value="'1'"> 1 
     <input type="radio" ng-model="selected2" ng-value="'2'"> 2 
     <input type="radio" ng-model="selected2" ng-value="'3'"> 3 

     <div>This selected value is : {{ selected2 }} </div> 
    </body> 
</html>

(function() { 

    var app = angular.module('testApp', []); 

    app.controller('testController', function($scope) { 
     $scope.occurrenceOptions = []; 

     $scope.occurrenceOptions.push('previous'); 
     $scope.occurrenceOptions.push('current'); 
     $scope.occurrenceOptions.push('next'); 

     $scope.selected2; 
    }); 
}());

İlk bölümde, tüm occurrenceOptions ng-yinelemeyi ve hepsini aynı modele bağlamayı denedim. Ancak, bir şey seçtiğimde her zaman selectedOccurrence değeri değişmez.

plunkr bakınız: https://plnkr.co/edit/k1pMgkLdrMUG1blktQx1?p=preview

ng-repeat olmadan ve sadece tüm radyo düğmeleri yazarak, bu işe almanız mümkün duyuyorum. Neden ng-repeat sürümü çalışmıyor?

kaynak

2016-06-24 Rhs

Bunun nedeni çalışmıyor, & kullanıyorsunuz, içinde ng-model değişkenini tanımlıyorsunuz. ng-repeat yönteminin çalışması, koleksiyonun her yinelemesinde yeni bir çocuk kapsamı (prototip olarak devralınır) oluşturur. Yani, ng-repeat şablonunda bulunan ng-model, yeni oluşturulan kapsama aittir. Burada ng-model="selectedOccurrence", ng-repeat'un her yinelemesinde selectedOccurrence kapsam değişkenini oluşturur.

Eğer angularjs modeli tanımlarken dot rule izlemeniz gerekir

Biçimlendirme böyle bir problemin üstesinden gelmek için

<body ng-controller="testController"> 
    <form> 
    <div ng-repeat="option in occurrenceOptions track by $index"> 
     <input type="radio" name="occurrences" ng-value="option" ng-model="model.selectedOccurrence" /> 
     <label>{{ option }}</label> 
    </div> 
    </form> 
    <div>The selected value is : {{ model.selectedOccurrence }}</div> 
</body>

Kod

$scope.model = {}; //defined a model object 
$scope.model.selectedOccurrence = 'current'; //and defined property in it

Demo Plunkr

veya kontrol birimi (kullanımı this yerine $scope kontrol içinde) ilan ise tercih edilen bir yöntem controllerAs kalıbı kullanarak olacaktır.

HTML

<body ng-controller="testController as vm"> 
    <form> 
     <div ng-repeat="option in vm.occurrenceOptions"> 
      <input type="radio" name="occurrence" ng-value="option" ng-model="vm.selectedOccurrence" /><label>{{ option }}</label> 
     </div> 
    </form> 
</body>

ControllerAs Demo

kaynak

2016-06-24 19:48:21

angularjs: radyo düğmeleri listesine Bağlama ng model

cevap

İlgili konular