使用角度js附加形式

时间:2015-12-24 03:44:44

标签: angularjs cakephp angularjs-directive angularjs-ng-repeat

我正在尝试使用angularJs附加表单。我是角度js的初学者。我正在使用CakePHP。到目前为止我能够做到的是,我已经成功添加了一些默认值的表单,点击“添加”#39;按钮,但我接下来要做的是能够将附加表单的值重置为def construct_dt_matrix(): dt_matrix = pd.DataFrame(columns=['docid']) docid = 0 for f in files: # text segmentation for f # remove stop words # word count store in cleaned_dict = {'word': tf} dt_matrix.loc[docid] = [0] * dt_matrix.shape[1] # add one row, init all 0 dt_matrix.set_value(docid, 'docid', docid) for key, value in cleaned_dict.items(): if key not in dt_matrix.columns.values: dt_matrix[key] = 0 # add one column, init all 0 dt_matrix.set_value(docid, key, value) # bottleneck docid += 1 并更改输入名称'对于每个表单域。我不知道如何获得它。任何帮助都会非常明显。

我在php中的基本代码是:

''

AngularJs Controller:

<div data-ng-repeat='choice in choices' class="other_tenant_class{{choice.id}}">

    <div class="form-group">
        <div class="row">
            <div class="col-sm-8 label-form">
                <label>Name</label> </div>

            <div class="col-sm-4 pull-right">
                <label >
                    <div class="toggle toggle-light ot_name_visibility"></div>
                    <?php echo $this->Form->input('name_visibility', array(
                        'class' => 'form-control switch_size_ot_name',
                        'type' => 'hidden',
                        'name' => 'data['.$i.'][name_visibility]',
                        'default' => $otherTenants[$i]['name_visibility']
                    )); ?>

                </label>   </div> </div>
        <div class="row">
            <?php echo $this->Form->input('name', array(
                'class' => 'form-control other_tenants_name',
                'label' => false,
                'name' => 'data['.$i.'][name]',
                'default' => $otherTenants[$i]['name']
            ));?>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <div class="col-sm-8 label-form">
                <label>Age</label> </div>

            <div class="col-sm-4 pull-right">
                <label >
                    <div class="toggle toggle-light ot_age_visibility"></div>
                    <?php echo $this->Form->input('age_visibility', array(
                        'class' => 'form-control switch_size_ot_age',
                        'type' => 'hidden',
                        'name' => 'data['.$i.'][age_visibility]',
                        'default' => $otherTenants[$i]['age_visibility']
                    )); ?>

                </label>   </div> </div>
        <div class="row">
            <?php echo $this->Form->input('age', array(
                'class' => 'form-control other_tenants_age',
                'name' => 'data['.$i.'][age]',
                'label' => false,
                'type' => 'number',
                'default' => $otherTenants[$i]['age']
            ));?>
        </div> </div>
    <div class="form-group">
        <div class="row">
            <div class="col-sm-8 label-form">
                <label>Relation</label> </div>

            <div class="col-sm-4 pull-right">
                <label >
                    <div class="toggle toggle-light ot_relation_visibility"></div>
                    <?php echo $this->Form->input('relation_visibility', array(
                        'class' => 'form-control switch_size_ot_relation',
                        'type' => 'hidden',
                        'name' => 'data['.$i.'][relation_visibility]',
                        'default' => $otherTenants[$i]['relation_visibility']
                    )); ?>

                </label>   </div> </div>
        <div class="row">
            <?php echo $this->Form->input('relation', array(
                'class' => 'form-control other_tenants_relations',
                'label' => false,
                'name' => 'data['.$i.'][relation]',
                'default' => $otherTenants[$i]['relation']
            ));?>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-sm-8 label-form">
                <label>Years Known</label> </div>

            <div class="col-sm-4 pull-right">
                <label >
                    <div class="toggle toggle-light ot_years_known_visibility"></div>
                    <?php echo $this->Form->input('years_known_visibility', array(
                        'class' => 'form-control switch_size_ot_years_known',
                        'type' => 'hidden',
                        'name' => 'data['.$i.'][years_known_visibility]',
                        'default' => $otherTenants[$i]['years_known_visibility']
                    )); ?>

                </label>   </div> </div>
        <div class="row">
            <?php echo $this->Form->input('years_known', array(
                'class' => 'form-control other_tenants_years_known',
                'label' => false,
                'name' => 'data['.$i.'][years_known]',
                'type' => 'number',
                'default' => $otherTenants[$i]['years_known']
            ));?>
        </div> </div>

    <?php }
    }
    ?>

    <button type='button' class="remove" ng-show="$first" ng-click="removeChoice()">Remove Field</button>
</div>
<button type='button' class="addfields" ng-click="addNewChoice()">Add fields</button>
</div>   

1 个答案:

答案 0 :(得分:0)

我不确定$i的来源,但看起来好像是在ng-repeat循环中尝试将其用作PHP迭代器偏移量。

请注意,一旦浏览器加载了页面,PHP就会变为静态。因此,您需要专门使用AngularJS,它提供{{$index}}作为迭代器偏移量。有关详细信息,请参阅ngRepeat

添加输入字段的代码应类似于以下内容:

<?php echo $this->Form->input('{{$index}}.age', array(
    'class' => 'form-control other_tenants_age',
    'label' => false,
    'type' => 'number',
    'ng-model' => "choice.age"
 )); ?>

要使其正常工作,您必须预先加载choices数组。一个简单的方法是在ng-controller声明中执行此操作:

<div ng-controller="MyController" ng-init='choices=<?=json_encode($otherTenants)?>'>

我不确定choices vs $otherTenants的含义是否正确,但只是考虑上面的例子来说明如何构建代码。

如果您发现CakePHP在AngularJs驱动的视图中遇到困难并使事情变得复杂,请删除$this->Form->input()并尝试使用纯HTML编写表单。