CODEWITHSUNDEEP
angularjs
user5619350
user5619350

Reputation:

AngularJS word capitalization filter

I have a short to-do-list program here. It works great, except for the capitalization filter to capitalize the first word of each string. It's flagging me for an injector error but I really don't know what's out of place.

<!--TOOD LIST HTML -->
<div ng-controller="todoController" id="todoCTRL">
<form name="frm" ng-submit="addTodo()">
    <input type="hidden" name="newtodo" ng-model="newTodo" required />
</form>

<ol>
    <li ng-repeat="todo in todos" id="listoftodos">
        <span>{{todo.title | capitalize}}</span>
    </li>
</ol>
</div>
<!-- TOOD LIST END HTML -->

<!-- TODOLIST JS -->
<script>
// TODOLIST JS
var app = angular.module('ToDo',[]);
app.controller('todoController',['$scope',function($scope){
$scope.todos = [

];

$scope.addTodo = function(){
    $scope.todos.push({'title':$scope.newTodo})
    $scope.newTodo = ''
}

app.filter('capitalize', function() {
 return function(input) {
  return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : '';
}
});

// TODOLIST END JS

UPDATE

Here is the actual error.

angular.js:13294 Error: [$injector:unpr] http://errors.angularjs.org/1.5.2/$injector/unpr?p0=capitalizeFilterProvider%20%3C-%20capitalizeFilter at Error (native) at https://code.angularjs.org/1.5.2/angular.min.js:6:416 at https://code.angularjs.org/1.5.2/angular.min.js:43:7 at Object.d [as get] (https://code.angularjs.org/1.5.2/angular.min.js:40:270) at https://code.angularjs.org/1.5.2/angular.min.js:43:69 at Object.d [as get] (https://code.angularjs.org/1.5.2/angular.min.js:40:270) at https://code.angularjs.org/1.5.2/angular.min.js:157:155 at V (https://code.angularjs.org/1.5.2/angular.min.js:118:262) at https://code.angularjs.org/1.5.2/angular.min.js:116:359 at p (https://code.angularjs.org/1.5.2/angular.min.js:7:355)(anonymous function) @ angular.js:13294(anonymous function) @ angular.js:10007m.$digest @ angular.js:16757m.$apply @ angular.js:17003commands.new item *val @ (index):76d.onresult @ annyang.min.js:6 35www-widgetapi.js:98 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://localhost') does not match the recipient window's origin ('http://localhost').g.K @ www-widgetapi.js:98g.O @ www-widgetapi.js:95

JSFIDDLE

Upvotes: 0

Views: 233

Answers (2)

Lex
Lex

Reputation: 7194

It doesn't look like your javascript is well formed - your controller is not properly closed. Also, I would recommend being consistent between either chaining your modules or creating an app variable and defining your modules off that. Try this:

var ToDo = angular.module('ToDo', []);

ToDo.controller('todoController', ['$scope',function($scope){
    $scope.todos = [];

    $scope.addTodo = function() {
        $scope.todos.push({'title':$scope.newTodo});
        $scope.newTodo = '';
    }
}]);

ToDo.filter('capitalize', function() {
    return function(input) {
        return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : '';
    }
});

Upvotes: 1

Mike Jerred
Mike Jerred

Reputation: 10525

when you do ToDo.filter you want ToDo to refer to your angular module, from the code it looks like it will be assigned to the controller. You want it to look like:

var ToDo = angular.module('ToDo',[]);
ToDo.controller(...);
ToDo.filter(...);

Upvotes: 1

Related Questions