Angular Controller not receiving values from ng-model

Question

var app = angular.module("colorIt",[]);
app.controller("ColorCtrl",function() {
  this.shape = '';
  this.style = {
    'border-color': '',
    'background-color': '',
    'border-width': '',
    'border-style': ''
  };
});

<!Doctype html>
<html data-ng-app="colorIt">

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/app.css">
    <link href="https://fonts.googleapis.com/css?family=Niconne|Quicksand:400,700" rel="stylesheet">
    <title>Colorit</title>
</head>

<body>
    <div id="user">
        <h1>Colorit</h1>
        <div id="inputs">
            <label for="shapes">Shape</label>
            <select class="shapes" name="shapes" ng-model="shape">
            <option value="">Select Shape</option>
            <option value="square">Square</option>
            <option value="circle">Circle</option>
          </select>
            <label for="background-color">Background Color</label>
            <input type="color" name="background-color" ng-model="style['background-color']">
            <label for="border-style">Border Style</label>
            <input type="text" name="border-style" value="solid" ng-model="style['border-style']" placeholder="solid dashed dotted inset">
            <label for="border-width">Border Width</label>
            <input type="text" name="border-width" value="2px" ng-model="style['border-width']" placeholder="2px 4px 2px 4px">
            <label for="border-color">Border Color</label>
            <input type="color" name="border-color" ng-model="style['border-color']" ng-init="#000" value="#000000">
            <label for="shadow">Box Shadow</label>
            <input type="text" name="shadow" ng-model="shadow" value="5px 5px 10px" placeholder="5px 5px 10px">
            <label for="shadow-color">Shadow Color</label>
            <input type="color" ng-model=color name="shadow-color" value="#000">
        </div>
    </div>
    <div id="display" ng-controller="ColorCtrl as color">
        <div ng-class="{{color.shape}}" ng-style="{{color.style}}">
            &nbsp;
            {{color.style['border-color']}},{{color.style['background-color']}},{{color.style['border-width']}}
        </div>
    </div>
    <script src="assets/js/colorit.js" charset="utf-8"></script>
</body>

</html>

The controller is not storing values from the ng-model. Initially I had built this app using only directives, which was working, but then I had to set default values of various inputs, so I am using a controller.

Also, I am getting this error in my console

Error: [$parse:lexerr] http://errors.angularjs.org/1.6.0/$parse/lexerr?p0=Unexpected%20nextharacter%20&p1=s%200-0%20%5B%23%5D&p2=%23000
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:6:425
    at pc.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:221:149)
    at pc.lex (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:218:369)
    at r.ast (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:225:175)
    at Cd.compile (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:235:100)
    at qc.parse (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:260:332)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:131:115
    at m.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:147:65)
    at Object.pre (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:284:350)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:16:71

Parse error is from using ng-init improperly. It doesn't assign anything and you shouldn't use ng-nit anyway for this use case — charlietfl
– charlietfl, Commented Dec 31, 2016 at 18:52
The error message is unrelated to your ng-model issue. The error is happening because you are saying ng-init="#000", which is invalid syntax. — AJ Richardson
– AJ Richardson, Commented Dec 31, 2016 at 18:54
@charlietfl AJ Richardson, thank you for providing that info. It's going to help a lot in the future. — relentless-coder
– relentless-coder, Commented Dec 31, 2016 at 19:01

dfsq · Accepted Answer · 2016-12-31 18:50:33Z

2

Move ng-controller="ColorCtrl as color" to the body tag and use controllerAs reference color in your bindings:

ng-model="color.style['border-width']

etc. for all ngModels.

answered Dec 31, 2016 at 18:50

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Controller not receiving values from ng-model

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related