简体   繁体   中英

$scope variables shortcuts in AngularJs Templates

In my controller I assign:

$scope.currentThing.data

And in my template sometimes I need

currentThing.data.response[0].hello

and sometimes

currentThing.data.otherStuff[0].goodbye
//or
currentThing.data.anotherThing[0].goodMorning

So I was wondering if it is possible to create a shortcut for this variables straight in the templates, something like:

{{response = currentThing.data.response[0]}}

So that I can use it like this {{response.hello}} .

In general, is it possible to assign temporary variables from the template? I don't need to have any data-binding, I would need them only for generating the template and then they can disappear forever

You can do that in controller like here: http://jsbin.com/moyuhe/1/edit

app.controller('firstCtrl', function($scope){
 $scope.currentThing = {

   data: [

     {response:[
       {hello:1},
       {hello:2}
     ]}
   ]

 };
 $scope.temp = $scope.currentThing.data[0];

});

HTML:

 <div ng-controller="firstCtrl">
  {{temp.response |json }}
      </div>

You might be able to use ngInit : https://docs.angularjs.org/api/ng/directive/ngInit

Although it seems that using it outside of ngRepeat is frowned upon.

<div ng-init="myvar = currentThing.data.response[0]">
    <span>{{myvar.hello}}</span>
</div>

I haven't tested it like this but that's the closest thing I can think of that may solve your problem.

Yes, it is possible using syntax like

{{ variable = ( expression ) }}

anywhere in HTML template (not just ng-init as some suggest).

It is exceptionally useful in cases when you need to use a calculated variable more times - it does not need to be calculated each time.

Some example

<!-- can use it before -->
<p> Calculated value is {{calculated}} </p>

<div ng-repeat=" item in calculated = ( allItems | filter1 | filter2 | filter3 ) ">
   {{item}} 
</div>

<!-- can use it after-->
<p> Calculated value is still {{calculated}} </p>

Edit: so in your case {{response = ( currentThing.data.response[0] ) }}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM