Angular JS data binding

Question

I'm just starting out with Angular (again).

I'm looking for two related questions to be answered regarding the following plunker

http://plnkr.co/edit/anfQW9NcZs1WuPL8yKdJ

var app = angular.module('Designer', [])
        .factory('TextModel', function () {
            return {
                'textAlign': 'left',
        'fontFamily': 'Arial'
            };
    });

app.controller('TextController', function($scope, TextModel){
    $scope.master = TextModel;
    $scope.$watch("master",function(){
        $scope.textStyles = {
            'text-align': $scope.master.textAlign,
            'font-family': $scope.master.fontFamily
        };
    }, true);

    $scope.setAlignment = function(newAlignment){
        $scope.master.textAlign = newAlignment;
    };

    $scope.setFont = function(font){
        $scope.master.fontFamily = font;
    };
});

In this, how can I apply the styles to only the currently focused input box rather than both.

And similarly, if I then change the font of one to Times and the other to Verdana, when I click either how do I update the select box to the font of the selected / focused input box.

Thanks

Answer 1

This plunker will do both things you asked for: http://plnkr.co/edit/6jHNai3iDp5oOjPhAXne.

You can apply the styles to only the currently focused input box by having a separate scoped value assigned to each element's ng-style attribute:

<textarea ng-style="text1Styles" ng-focus="setFontMenu($event, 1)">Test Text Area</textarea>
<textarea ng-style="text2Styles" ng-focus="setFontMenu($event, 2)">Test Text Area</textarea>

Only update the one with focus in your setFont function. The setFontMenu function is sensitive to which element has focus:

$scope.setFontMenu = function(event, index) {
    $scope.myFont = TextModel.getFont(event.target.style.fontFamily);
    $scope.hasFocus = index;
};

$scope.setFont = function() {
    if ($scope.hasFocus === 1) {
        $scope.text1Styles = {
            'font-family': $scope.myFont.name
        };
    } else if ($scope.hasFocus === 2) {
        $scope.text2Styles = {
        'font-family': $scope.myFont.name
    };
}

I updated your factory to return a font list so you can see how TextModel can be more powerful and bound it's content to your select element:

<select id="font_dd" ng-model="myFont" 
      ng-options="font.name for font in fonts"
      ng-change="setFont()">
</select>

There are likely better ways of accomplishing all this but hopefully these edits to your plunker are helpful.

Answer 2

For each parameter you want to control, define two css classes, let's call them .with and .without ; then use the ng-class directive on your component :

<textarea ng-class="{'with':selected, 'without':!selected}"></textarea>

You can add as many as you like, and use various flags that you can set via ng-click (when you click something), ng-change (when a user action changes an input), ng-mouseover (as the name implies) ...

You can actually do the same with ng-style, but it is usually a good practice to refactor most stylings into classes if you plan to reuse them.

EDIT To answer your question below : it depends on how you code it. For example, you can have individual backing objects for each textarea that would store their value as well as their state. You would then select classes based on a flag area.selected instead of a global one. This state would not be lost until you did something about it (e.g. if you only want one textarea to be selected, you could have a function that unselects the other one). Or you could store the font name itself and do ng-style="{'font-family':area.font}"