2

I'm just starting out with Angular.

I've written some code that downloads a JSON array configuredAPIs and displays each object within it, <div ng-repeat="capi in configuredAPIs">. For each of these, there's another directive to list the items from an array of strings, <tr ng-repeat="eurl in capi.externalURLs">

Underneath there's a text box to add a new string to this array, which I've bound to a $scope variable called url.

When I click the 'add' button, everything works - the new string is added to the array, a new row appears in the table.. ..but it only works once. Subsequent clicks on the 'add' button add empty strings to the array (and thus empty text boxes).

What have I done wrong?

index.html

    <div ng-app="testApp" ng-controller="testCtrl">

        <div ng-repeat="capi in configuredAPIs">

            <h1>Configured API</h1>
            <p>
                Name:
                {{ capi.name }}
            </p> 

            <h2>External URLs</h2>
            <form ng-submit="addExternalURL(capi)">
                <table>
                    <!-- A row in the table for each string in the array -->
                    <tr ng-repeat="eurl in capi.externalURLs">
                        <td>
                            <input type="text" ng-model="eurl" />
                        </td>
                    </tr>

                    <!-- Final table row to add a new string to the array -->
                    <tr>
                        <td>
                            <input type="text" ng-model="url" placeholder="Enter a new external URL">
                            <input class="btn-primary" type="submit" value="add">
                        </td>
                    </tr>
                </table>
            </form>

        </div>
    </div>

controller.js

var app = angular.module('testApp', []);
app.controller('testCtrl', function ($scope, $http) {

    $scope.url = 'new url';

    $http.get("/api/configuredapis?orgid=2")
    .success(function (response) { $scope.configuredAPIs = response; });

    $scope.addExternalURL = function ($capi) {
        $capi.externalURLs.push($scope.url);
        $scope.url = '';
    };

});
2
  • try $parent.url. Perhaps because of the outer ng repeat, url is getting defined within a child scope.
    – Rusty Rob
    Oct 3, 2015 at 20:16
  • remove $scope.url = '';
    – guramidev
    Oct 3, 2015 at 20:19

1 Answer 1

0

It is because AngularJS does not watch and update primitives (e.g. strings, numbers, booleans) the way one obviously thinks it does.

So instead you bind objects with values to the scope or use a function which returns the primitive value.

See:

https://github.com/angular/angular.js/wiki/Understanding-Scopes

http://www.codelord.net/2014/05/10/understanding-angulars-magic-dont-bind-to-primitives/


Example for using an object (at controller):

$scope.primitives = {
    url : 'foo://'
}

And within the template:

<input type="text" ng-model="primitives.url">

So what happens in your example is that once you set it to '' the changes to the model within the template are not recognized anymore.

1
  • Ah, that fixed it. And taught me lots of new stuff. Thanks.
    – Carlos P
    Oct 3, 2015 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.