angularjs - Radio buttons plus a text field in Angular.js -

-

using angularjs, create list of options radio buttons, last of has empty text field labeled 'other' inputing option not in list. here's demonstration of have in mind bootstrapped in codepen. since stack overflow insists on including codepen code in message, here is:

js:

angular.module('choices', [])   .controller("mainctrl", ['$scope', function($scope) {      $scope.color = '';      $scope.colors = [       "red",       "green",       "blue",       "other"      ];      $scope.changecolor = function(){       $scope.color = "red"     };  }]);

html:

<html> <head> <body ng-app="choices" ng-controller="mainctrl">   <div ng-repeat="color in colors">      <input type="radio" ng-model="$parent.color" ng-value="color" id="{{color}}" name="color">        <label>          {{color}}        </label>       <input type="text" ng-model="$parent.color" ng-show="color=='other'">   </div>   <p></p>   chosen color <strong>{{color}}</strong>   <p></p>   <button ng-click="changecolor()">change color</button> </body> </html>

here want demo app do:

  • when choose option except other, text field should remain blank;
  • if place cursor in text field, option other should selected
  • once start typing in text field, option other should remain selected
  • if change model registers options (in demo app achieved clicking change color button), corresponding radio button should selected.

i achieved of functionality using 3 models (one color, 1 keeping track of radio buttons , 1 other field) , 3 watchers, resultant app seems brittle , fails of tests. please suggest better way creating such selector in angular using few models , watchers possible?

(my question similar this question, hope different enough not considered duplicate.)

add separate scope property other text:

$scope.other = '';

add colorchanged() method called when color changed. set other text empty if color not 'other':

$scope.colorchanged = function () {     if ($scope.color != 'other') {       $scope.other = '';     } };

this need called changecolor(). ended changing changecolor allow color passed in. otherwise defaults red:

$scope.changecolor = function(color){     $scope.color = color || "red";     $scope.colorchanged(); };

add ng-change="colorchanged()" radio button: 

<input type="radio" ng-model="$parent.color" ng-value="color" id="{{color}}" name="color" ng-change="colorchanged()">

change textbox use other model. use ng-focus detect when textbox focused , set color 'other'. doing select radio button.

<input type="text" ng-model="$parent.other" ng-show="color=='other'" ng-focus="$parent.color = 'other'"/>

update display of color show other text:

the chosen color <strong>{{color}}<span ng-if="color === 'other' && other != ''"> - {{other}}</span></strong>

plunkr


Comments

Post a Comment

Popular posts from this blog

ios - Memory not freeing up after popping viewcontroller using ARC -

-
hi project arc based, using uinavigationcontroller make transition between viewcontroller. using profiler analyse happening behind scene memory. noticed when push viewcontroller allocate memory components , when pop not freeing allocated memory. since using arc unable implement dealloc or release component. have analysed in detail , there no memory leak in project. i not using strong property push viewcontroller. here how pushing viewcontroller. viewcontroller *obj = [[viewcontroller alloc] init]; [self.navigationcontroller pushviewcontroller:obj animated:no]; any clue whats going on? should free memory have consumed. please advise your description indicates have retain cycle, leads objects not being deallocated. typical source of retain cycles properties assigned loading nib files (usually declared iboutlet ). two strategies break them , release objects: declare property weak : @property (nonatomic, weak) iboutlet uilabel *statuslabel; set property nil in...
Read more

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more