0

I am dynamically creating textboxes, therefor I would also need dynamic model names, I figured I should use it's Id, since it's identical.

I have this Textbox:

<input type="text" ng-init="scope[child.Root.Id] = ''" ng-model="scope[child.Root.Id]" />

The Textbox should bind to the value of Child.Root.Id, this seems to work, as the following samples work perfectly fine:

<p ng-hide="scope[child.Root.Id] == 123">This is a test.</p>
<p ng-hide="scope[child.Root.QuestionModel.ItemId] == 123">This is a test.</p>

Both of these Id's have the same value. And the text hides when '123' is typed in the textbox.

However, I need to hide something else, and in this place I can't use child.Root.id, but I do have a child.Root.ParentId with the same value:

<p ng-hide="scope[child.Root.ParentId] == 123">This is also a Test!</p>

This doesn't work, What am I doing wrong?

This is my first project in Angular, so I don't have much experience with it.

Thanks in advance.

edit:

<div ng-app="myApp" ng-controller="ctrl">
@*Start myApp-html-html*@
    <script type="text/ng-template" id="field_renderer.html">
        <!-- Group-->
        <div ng-if="child.Root.GroupModel!=null">
            <div ng-bind="child.Root.GroupModel.Header"></div>
            <div ng-repeat="child in child.Children" ng-include="'field_renderer.html'"></div>
        </div>
        <!-- Question-->
        <div class="Question" ng-if="child.Root.QuestionModel!=null" >
            @Html.Partial("QuestionEntryPartialView")
            <div ng-repeat="child in child.Children" ng-include="'field_renderer.html'"></div>
        </div>
        <!-- Decission-->
        <div ng-if="child.Root.DecisionModel!=null">
            <p ng-hide="scope[child.Root.ParentId] == 123">This is also a test!</p>
                @*<div ng-repeat="child in child.Children" ng-include="'field_renderer.html'"></div>*@
        </div>
    </script>

    <span ng-repeat="child in model.Children" ng-include="'field_renderer.html'">
        <span ng-if="child.Root.GroupModel!=null" ng-bind=" child.root.groupmodel.header"></span>
        <span ng-if="child.Root.QuestionModel!=null" ng-bind="child.Root.QuestionModel.Question"></span>
        <span ng-if="child.Root.DecisionModel!=null" ng-bind-html="child.Root.DecisionModel.Description"></span>
    </span>
@*End myApp*@
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('ctrl', function ($scope, $http, $sce) {
        window.MY_SCOPE = $scope;
        $http.post('@Url.Action("GetItemsModel", "Question")')
        .success(function (response) {
            $scope.model = response;
            console.log(response);
        });
    });
</script>

QuestionEntrypartialView contains:

<div>
    <input type="text" ng-init="scope[child.Root.Id] = ''" ng-model="scope[child.Root.Id]"/>
</div>
<p ng-hide="scope[child.Root.Id] == 123">This is a test.</p>
<p ng-hide="scope[child.Root.QuestionModel.ItemId] == 123">This is a test.</p>
Wim
  • 85
  • 1
  • 14
  • 1
    can you put the complete code – Harsh Oct 29 '15 at 10:41
  • Possible duplicate of [Dynamic ng-model name in AngularJS form](http://stackoverflow.com/questions/22489683/dynamic-ng-model-name-in-angularjs-form) – Mitul Oct 29 '15 at 11:10
  • That indeed is a similar problem, however not the same; His answer also doesn't help me. – Wim Oct 29 '15 at 11:16

0 Answers0