ruby on rails - radio inputs not working with angular -
i'm using radio inputs in form, put same ng-model
on both of them. can't value in controller, can value of other ng-model
fields.
you can find code on jsfiddle , codepen (none of them working reasons)
here haml form
%form.project{'ng-submit' => "createnewproject()"} .name %input{'ng-model'=>'name', :type => :text, :placeholder => 'name', :name => "name"} .description %textarea{'ng-model'=>'description', :placeholder => 'description', :required=>true, :name => "description"} .orientation %input#portrait{'ng-model'=>'orientation', :type=>"radio", :name=>"orientation", :value=>"1", :checked=>true} %label{:for=>"portrait"} %input#landscape{'ng-model'=>'orientation', :type=>"radio", :name=>"orientation", :value=>"2"} %label{:for=>"landscape"}
here controller
app.controller('thecontroller', ['$scope', function($scope) { $scope.createnewproject = function() { var item = { name:this.name, description:this.description, orientation:this.orientation }; //item.orientation undefined } }]);
solution
in controller, create attribute orientation , set default value want radios input set (remove :checked=>true
in radio input).
haml
%input#portrait{'ng-model'=>'orientation', :type=>"radio", :name=>"orientation", :value=>"1"} %label{:for=>"portrait"} %input#landscape{'ng-model'=>'orientation', :type=>"radio", :name=>"orientation", :value=>"2"} %label{:for=>"landscape"}
controller
app.controller('thecontroller', ['$scope', function($scope) { $scope.orientation = 1; $scope.createnewproject = function() { var item = { name:this.name, description:this.description, orientation:this.orientation }; //item.orientation undefined } }]);
the process following:
if not create orientation attribute first, won't initialized until radio inputs change, have this.orientation
undefined.
so solution set value of $scope.orientation
in controller.
it create attribute don't have undefined, and, set radios input default position, :checked=>true
becomes useless(and doesn't have effect on attribute anyway)
Comments
Post a Comment