Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>As @Gloopy already stated, ng-repeat creates a new child scope for each item in your <code>posts</code> array. Since each item of the <code>posts</code> array is a primitive (a string), ng-repeat also creates a <code>post</code> property on each child scope, and assigns each of them the appropriate value from the array. Inside the ng-repeat block is <code>ng-model="postText"</code>. This creates a postText property on each of the child scopes. Here is what that all looks like (for 2 of the 4 child scopes):</p> <p><img src="https://i.stack.imgur.com/R3DCA.png" alt="ng-repeat scopes"></p> <p>When a user types some text into one of the input textboxes, the appropriate gray box will store the text. (E.g., the 2nd (from the top) gray box will store text a user types into the "tech" textbox.) The parent scope cannot see the postText properties in the child scope -- this is the problem you had. There are three common solutions:</p> <ol> <li>@Gloopy's answer: define a function on the parent scope (which the child scopes can access, because ng-repeat child scopes prototypically inherit from the parent scope) and pass the child scope property value (i.e., postText's value) up to the parent.</li> <li>Use objects instead of primitives in your <code>posts</code> array. E.g.,<br> <code>$scope.posts = [ {type: 'tech'}, {type: 'news'}, ...];</code><br>Then in your ng-repeat loop, use<br> <code>&lt;input type="text" ng-model="post.postText"&gt;</code><br> Because each array item is an object (and not a primitive), each child scope gets a reference to the appropriate object in array <code>posts</code>, rather than a copy (of a value). Therefore, <code>post.postText</code> gets created on parent $scope property <code>posts</code>, and hence it is visible to the parent scope. (So, in this case the child scopes would simply call <code>savePost()</code> -- there would be no need to pass any values up to the parent scope.)<br> In other words, if a user typed "this is tech related" into the first text box, the <code>posts</code> array in the parent would be automatically updated as follows:<br> <code>$scope.posts = [ {type: 'tech', postText: 'this is tech related'}, {type: 'news'}, ...];</code><br>One last note: the postText property is not added to the posts object until the user types something.</li> <li>Use <code>ng-model="$parent.someProperty"</code> to bind the form element to a property on the parent scope, rather than on the child scope. This solution would be difficult to implement for your scenario, and it is a rather fragile solution, as it depends on the HTML structure for scope inheritance... but I mention it for completeness.</li> </ol> <p>(A fourth solution was presented by @Renan in comments on @Gloopy's answer. This is a like solution 1., but with a variation: <code>this</code> is used instead of passing a value up to the parent. I'm not a fan of this approach as it makes it difficult to determine which $scope is being accessed or modified. I think it is better that functions defined on $scope only access and modify their own $scope.)</p> <p>For more information (and lots more pictures) about how prototypal scope inheritance works in Angular, see <a href="https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs">What are the nuances of scope prototypal / prototypical inheritance in AngularJS?</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload