javascript - Data binding inside <option> element in angular.js and jQuery mobile -
i have added multi-language support jquery-mobile/phonegap app using this great repo on github.
it uses firebase , angular.js bind language dependant labels , texts in app selected language, in example:
<h2>{{getword("selection_criteria")}}</h2>
however, there language-dependant texts in app cannot bound language data, have found far:
<select id="sel" data-role="slider"> <option value="off">{{getword("select_off")}}</option> <option value="on">{{getword("select_on")}}</option> </select>
the <option>
element doesn't allow bind it's text data (the rendered text empty). don't know why. tried test whether work:
<option value="off">{{1+2}}</option>
and yes, displayed number 3 in slider.
the angular.js part looks this:
function languagectrl($scope) { $scope.words = json.parse('{}'); $scope.addword = function(name, value) { $scope.words[name] = value; }; $scope.getword = function(name) { return $scope.words[name]; }; } var ref; var reflang; var onlangchange; $(document).on("pageinit", "#mainpage", function(event) { ref = new firebase('https://username.firebaseio.com/'); changelangto("en"); //default lang }); function changelangto(lang) { if (onlangchange !== undefined && onlangchange !== undefined) { reflang.off('child_changed', onlangchange); } reflang = ref.child(lang); //reading once words reflang.once('value', function(datasnapshot) { var lang = datasnapshot.val(); angular.element($("#mainpage")).scope().$apply(function(scope) { $.each(lang, function(key, value) { scope.addword(key, value); }); }); }); //listening changes onlangchange = reflang.on('child_changed', function(childsnapshot, prevchildname) { angular.element($("#mainpage")).scope().$apply(function(scope) { scope.addword(childsnapshot.name(), childsnapshot.val()); }); });
the json firebase parsed variable simple, like:
{ "cz": { "select_on":"ano", "select_off":"ne" }, "en": { "select_on":"on", "select_off":"off" } }
i think <button>
element won't work, too. , there cases of setting element text via attribute, in case:
<ul data-filter-placeholder="search items..."></ul>
i make work, too:
<ul data-filter-placeholder="{{getword("search_items")}}"></ul>
i new angular.js, can please explain me how make work? have read documentation on html select element angular data-binding, not quite understand how apply it.
thanks!
Comments
Post a Comment