Angularjs在Laravel 5中内插表单动作属性

时间:2015-09-11 19:05:45

标签: angularjs laravel laravel-5

我已经了解到在Laravel的Angular代码前添加@,它运行正常。即:<h1>Hello, @{{ yourName }}!</h1>

我的Angularjs ng-repeat正在生成不同的FORM和A HREF。插值适用于链接,但不适用于表单操作属性。

我想生成与此类似的链接:

http://www.example.com/clients/5/edit

这有效

<a class="btn" href="{{ URL::to('clients/') }}/@{{ i.clientid }}/edit">Edit</a>

但我觉得有趣的是,相同的href在我的表单操作属性中不起作用:

<form action="{{ URL::to('clients/') }}/@{{ i.clientid }}/edit" method="POST">

我收到以下错误消息:

  

“错误:[$ interpolate:noconcat]插值时出错:   http://www.example.com/clients/ {{i.clientid}} /编辑严格上下文   转义不允许连接多个的插值   需要可信值时的表达式

使用AngularJS 1.4.4

更新 - 添加了代码示例

Angularjs

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

app.controller('instantSearchCtrl',function($scope,$http){
    $http.get('/api/clients').success(function(data, status, headers, config) {
        $scope.items = data.clients;

    }).error(function(data, status, headers, config) {
        console.log("No data found..");
  });
});


app.filter('searchFor', function(){
    return function(arr, searchString){
        if(!searchString){
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(item){
            if(item.first_name.toLowerCase().indexOf(searchString) !== -1){
            result.push(item);
        }
        });
        return result;
    };
});

HTML(Laravel blade)有两个示例表单

<div ng-app="instantsearch">
    <div ng-controller="instantSearchCtrl">

        <div class="row">
        <div class="col-sm-12">
            <input type="text" class="search" ng-model="searchString" placeholder="Enter your search terms" />
        </div>
        </div>


        <div class="row data-ctrl" ng-repeat="i in items | filter:searchString | limitTo:20 ">
           <div class="col-sm-8">
                @{{ i.first_name }} @{{ i.last_name }} @{{ i.address }}
           </div>

          <div class="col-sm-4">                                     

                <!-- TEST FORM #1 -->                
                 {!! Form::open(array('url' => 'clients/@{{ i.clientid }}' , 'class' => 'pull-right', 'onsubmit' => 'return ConfirmDelete()')) !!}
                 {!! Form::hidden('_method', 'DELETE') !!}
                 {!! Form::button('', array('type' => 'submit', 'class' => 'btn btn-warning glyphicon glyphicon-trash')) !!}
                 {!! Form::close() !!}

                <!-- TEST FORM #2 -->                
                <form action="{{ URL::to('clients/') }}/@{{ i.clientid }}" method="POST">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <button>Delete User</button>
                </form>

                 <a class="btn btn-small btn-info pull-right glyphicon glyphicon-pencil" href="{{ URL::to('clients/') }}/@{{ i.clientid }}/edit"></a>

                <a class="btn btn-small btn-success pull-right glyphicon glyphicon-list-alt" href="{{ URL::to('clients/') }}/@{{ i.clientid }}"></a>

          </div>
        </div>
    </div>
</div>

在添加angularjs变量之前生成代码

<!-- TEST FORM #1 -->                
<form method="POST" action="/public/clients" accept-charset="UTF-8" class="pull-right" onsubmit="return ConfirmDelete()"><input name="_token" type="hidden" value="hkjrehkgjehjk">
<input name="_method" type="hidden" value="DELETE">
<button type="submit" class="btn btn-warning glyphicon glyphicon-trash"></button>
</form>

<!-- TEST FORM #2 -->                                
<form action="/public/clients" method="POST">
    <input type="hidden" name="_method" value="DELETE">
    <input type="hidden" name="_token" value="hkjrehkgjehjk">
    <button>Delete User</button>
</form>

<a class="btn btn-small btn-info pull-right glyphicon glyphicon-pencil" href="/public/clients/{{ i.clientid }}/edit"></a>

<a class="btn btn-small btn-success pull-right glyphicon glyphicon-list-alt" href="/public/clients/{{ i.clientid }}"></a>

将angularjs变量添加到表单后生成代码 - 表单未显示并获取“错误:[$ interpolate:noconcat]插值时出错”错误

<!-- TEST FORM #1 -->   
<form method="POST" action="/public/clients/{{ i.clientid }}" accept-charset="UTF-8" class="pull-right" onsubmit="return ConfirmDelete()"><input name="_token" type="hidden" value="hkjrehkgjehjk">
<input name="_method" type="hidden" value="DELETE">
<button type="submit" class="btn btn-warning glyphicon glyphicon-trash"></button>
</form>

<!-- TEST FORM #2 -->   
<form action="/public/clients/{{ i.clientid }}" method="POST">
    <input type="hidden" name="_method" value="DELETE">
    <input type="hidden" name="_token" value="hkjrehkgjehjk">
    <button>Delete User</button>
</form>

<a class="btn btn-small btn-info pull-right glyphicon glyphicon-pencil" href="/public/clients/{{ i.clientid }}/edit"></a>

<a class="btn btn-small btn-success pull-right glyphicon glyphicon-list-alt" href="/public/clients/{{ i.clientid }}"></a>

1 个答案:

答案 0 :(得分:0)

你不能在行动中使用多个表达式(也适用于:src,ng-src),more informations

尝试使用ng-init设置路径,然后在操作中使用它。像这样:

 <form ng-init=\"myPath = '{{ URL::to("clients/") }}/'+ i.clientid + '/edit' \" action="{{myPath}}">