标签: angularjs-ng-init

我试图显示元素的二叉树,我用ng-include递归地进行.

ng-init="item = item.left"和之间有什么区别ng-repeat="item in item.left"？在这个例子中,它的行为完全相同,但我在项目中使用类似的代码,并且它的行为有所不同.我想这是因为Angular范围.也许我不应该使用ng-if,请解释我如何做得更好.

pane.html是:

<div ng-if="!isArray(item.left)">
    <div ng-repeat="item in [item.left]" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.left)">
    {{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
    <div ng-repeat="item in [item.right]" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.right)">
    {{item.right[0]}}
</div>

<div ng-if="!isArray(item.left)">
    <div ng-init = "item = item.left" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.left)">
    {{item.left[0]}}
</div>
<div ng-if="!isArray(item.right)">
    <div ng-init="item = item.right" ng-include="'Views/pane.html'">
    </div>
</div>
<div ng-if="isArray(item.right)">
    {{item.right[0]}}
</div>

控制器是:

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

app.controller('MainCtrl', function ($scope) {

    $scope.tree = {
        left: {
            left: …

我有一个控制器,我写的,我在多个地方使用我的应用程序ng-include和ng-repeat,就像这样:

<div
  ng-repeat="item in items"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>

在控制器/模板中,我希望item价值存在,而整个事物都围绕着这个想法.但是,现在,我需要以稍微不同的方式使用控制器,没有ng-repeat,但仍然需要能够传入item.我看到ng-init并认为它可以做我需要的,像这样:

<div
  ng-init="item = leftItem"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>
<div
  ng-init="item = rightItem"
  ng-include="'item.html'"
  ng-controller="ItemController"
></div>

但这似乎并没有奏效.任何人都有任何想法如何在像这样的单一实例中传入变量的范围？

编辑:上面的控制器正在加载leftItem和rightItem值,如下所示:

.controller('MainController', function($scope, ItemModel) {
    ItemModel.loadItems()
        .then(function(items) {
            $scope.$apply(function() {
                $scope.leftItem = items.left;
                $scope.rightItem = items.right;
            });
        });
});

我想将一个默认值设置为范围,由ng-bind选取.我这样做:

<button>Show <span data-ng-bind="data.text" data-ng-init="data.text = 'All';"></span> Names</button>

在此示例中,当页面加载时,span设置为innerHTML ='All'.

但是,我希望有一种方法可以做到这一点,而不需要使用ng-init,可能是这样的:

<button>Show <span data-ng-bind="data.text = 'All';"></span> Names</button>

Angular中ng-init的范围是什么？这是一个演示我的问题的简单示例:

    <div ng-init="model = { year: '2013'}">
      <a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a>
      <div>Showing {{ model.year }}</div>
      <hr />
    </div>
    <div ng-init="model = { year: '2013'}">
      <a href="" ng-click="model.year = '2012'">2012</a> | <a href="" ng-click="model.year = '2013'">2013</a>
      <div>Showing {{ model.year }}</div>
    </div>

此处提供实时示例:http://plnkr.co/edit/HkioewOzzglvFMKDPdIf？p = preview

似乎ng-init范围在2 div [ng-init]之间共享.例如,如果您点击"2012"年,则会更改这两个部分.有没有办法告诉angular为每个ng-init创建一个新的范围,从而点击'2012'年只会影响它所属的部分？

我在.NET MVC中编码,并希望将存储的DateTime对象作为控制器中Date对象的初始值传递给前端.

这是我尝试过的:

ng-init="params.datetime = new Date()"

这似乎不起作用,我得到一个语法错误.

如何将Date对象作为范围变量的初始属性传递？

http://jsfiddle.net/xX8LJ/

UPDATE

我忘了在我的代码示例中包含Razor代码.

ng-init="params.datetime = new Date('@Model.DepartureTime.ToString("s")')"

如您所知,可以按如下方式初始化对象:

<div ng-init="friends = [{name:'John', phone:'555-1276'},
                         {name:'Mary', phone:'800-BIG-MARY'},
                         {name:'Mike', phone:'555-4321'},
                         {name:'Adam', phone:'555-5678'},
                         {name:'Julie', phone:'555-8765'},
                         {name:'Juliette', phone:'555-5678'}]"></div>

是否可以通过函数定义类似这样的对象:

<div ng-init="init()">

我的目标实际上是从API获取对象并通过ng-repeat在列表中显示它们

我有一个简单的选择元素,我试图强制提供一个值来提交表单,我尝试了设置所需的属性以及使用ng-init来确保选择了一个值并且都失败了.

我ng-options用来创建一个具有ref属性的对象数组的值列表.然后我想ng-init用于将显示的值设置为数组中的第一个Object.ref.

<select name="refmarker" class="input-block-level form-width-adjust" ng-model="model.refmarker" ng-options="rm.ref for rm in refmarkers" ng-disabled="editable" ng-init="model.refmarker='refmarkers[0].ref'" required></select>

我没有运气就试过以下

ng-init="model.refmarker='refmarkers[0]'"
ng-init="model.refmarker='refmarkers[0].ref'"
ng-init="model.refmarker='rm.ref'"

该required属性也不起作用？角度选择元素是否错误或我做错了什么？

我已经看到关于这个ng-init问题的堆栈溢出的一些exmaples,虽然我似乎找不到使用控制器引用它的一个.

我通过在html文件中包含以下内容来调用控制器中的函数

<div class="tab-container" ng-controller = "ExampleController" ng-init = "init()" >

在控制器中:

$scope.init = function(){

        alert("do something");
};

它确实运行,但它在组件加载到屏幕上之前运行.

我错过了什么吗？

谢谢

我一直在搜索高低,以解释如何删除AngularJS总是在选择中呈现的空选项.当从直接放在代码中的JSON数组派生选项时,我发现了很多信息,但在使用数据对象时,我找不到任何有关删除此空选项的信息.

假设我的数据库中有对象"foo","foo"同时包含"name"和"bar_id".

有人可以告诉我有关使用数据对象执行此操作的线索吗？

参考: Angular JS从选择选项中删除空白选项

http://jsfiddle.net/MTfRD/3/(这是上面链接的SO问题的其他人的小提琴;代码不是我的,而是取自那个小提琴.)

JS:

function MyCtrl($scope) {
    $scope.typeOptions = [

        { name: 'Feature', value: 'feature' }, 
        { name: 'Bug', value: 'bug' }, 
        { name: 'Enhancement', value: 'enhancement' }
    ];

    $scope.form = {type : $scope.typeOptions[0].value};
}

我想得到foo.name和foo.bar_id.我希望foo.name是选项标签,foo.bar_id是值(例如<option value="foo.bar_id">foo.name</option>,对于每个foo,foo.bar_id将成为记录中的一个识别参数,用于拉出并显示"on change"(选择后立即)选项).

我已经尝试了所有我能想到的东西来设置它,似乎没有任何工作.最糟糕的是,它要么默默地失败,要么没有任何迹象表明我做错了什么,或抱怨foo不是一个对象,这让我感到沮丧.(我向你保证,"foo"是由我正在处理的实际代码中的AJAX请求加载的,并且在其他地方作为对象正常工作 - 尽管如此,NDAs禁止我共享实际代码,抱歉.)

使用其他线程中的上述示例,我理解我会ng-model="typeOptions"在模板中的select标签中分配一些内容,但是如何获取"typeOptions"来访问foo并使foo.name成为选项标签而foo.bar_id是选项值？此外,选项的默认角度值(看起来像生成的索引的那些)对我来说很好,但是我仍然需要调用foo.bar_id来完成任务,所以它必须"在某处".

任何帮助,将不胜感激; 目前我坚持选项本身的hackish ng-repeat,我理解这不是最佳实践..而且我在Angular中仍然相当新,但仍然觉得有些混乱,所以你的答案更简单,更直接,我将能够更好地成功使用它们.谢谢!

ng-init是否关注像ng-model这样的实例化属性的变化？

显然不是,所以我设置了一个如下所示的手表:

app.js

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

app.controller('MainCtrl', function($scope) {
  $scope.$watch('myProp1', function(newVal, oldVal){
    $scope.myProp1 = newVal
  })
});

HTML

<body ng-controller="MainCtrl">
<input ng-init='myProp="my property"'>{{myProp}}</br>
<input ng-init='myProp1="my 1 property"'>{{myProp1}}</br>
<input ng-init='myProp11="my 11 property"' ng-model='myProp11'>{{myProp11}}

这是plnkr

1. ng-init是否关注像ng-model这样的实例化属性的变化？
2. 如何查看ng-init实例化的属性中的更改？
3. 上面的$ watch功能有什么问题？