เริ่มต้นการเลือกด้วย AngularJS และ ng-repeat

Question 1

ฉันกำลังพยายามให้ select-box เริ่มต้นด้วยตัวเลือกที่กรอกไว้ล่วงหน้าโดยใช้ ng-repeat กับ AngularJS 1.1.5 แต่การเลือกจะเริ่มต้นโดยไม่ได้เลือกไว้เสมอ นอกจากนี้ยังมีตัวเลือกว่างซึ่งฉันไม่ต้องการ ฉันคิดว่ามีผลข้างเคียงจากการไม่เลือกอะไร

ฉันสามารถใช้งานได้โดยใช้ ng-options แทน ng-repeat แต่ฉันต้องการใช้ ng-repeat สำหรับกรณีนี้ แม้ว่าตัวอย่างที่แคบลงของฉันจะไม่แสดง แต่ฉันก็ต้องการตั้งค่าแอตทริบิวต์หัวเรื่องของแต่ละตัวเลือกและไม่มีวิธีใดที่จะทำได้โดยใช้ตัวเลือก ng เท่าที่ฉันรู้

ฉันไม่คิดว่าสิ่งนี้เกี่ยวข้องกับขอบเขต AngularJs ทั่วไป / ปัญหาการสืบทอดต้นแบบ อย่างน้อยฉันก็ไม่เห็นอะไรชัดเจนเมื่อตรวจสอบใน Batarang นอกจากนี้เมื่อคุณเลือกตัวเลือกในการเลือกด้วย UI โมเดลจะอัปเดตอย่างถูกต้อง

นี่คือ HTML:

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

และ JavaScript:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

JS Fiddle สำหรับสิ่งนี้: http://jsfiddle.net/coverbeck/FxM3B/2/

Question 2

ตกลง. หากคุณไม่ต้องการใช้วิธีที่ถูกต้องng-optionsคุณสามารถเพิ่มng-selectedแอตทริบิวต์ด้วยตรรกะการตรวจสอบเงื่อนไขสำหรับoptionคำสั่งถึงเพื่อให้การเลือกล่วงหน้าทำงานได้

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

Working Demo

Question 3

สำหรับแท็ก select เชิงมุมจะให้คำสั่ง ng-options ช่วยให้คุณมีกรอบเฉพาะในการตั้งค่าตัวเลือกและตั้งค่าเริ่มต้น นี่คือซอที่อัปเดตโดยใช้ ng-options ที่ทำงานได้ตามที่คาดไว้: http://jsfiddle.net/FxM3B/4/

อัปเดต HTML (โค้ดยังคงเหมือนเดิม)

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>

Question 4

ขอบคุณTheSharpieOne ที่ชี้ให้เห็นตัวเลือกที่เลือก ng หากสิ่งนั้นถูกโพสต์เป็นคำตอบแทนที่จะเป็นความคิดเห็นฉันจะทำให้คำตอบนั้นถูกต้อง

นี่เป็น JSFiddle ทำงาน: http://jsfiddle.net/coverbeck/FxM3B/5/

ฉันยังอัปเดตซอเพื่อใช้แอตทริบิวต์ชื่อเรื่องซึ่งฉันได้ทิ้งไว้ในโพสต์เดิมของฉันเนื่องจากไม่ใช่สาเหตุของปัญหา (แต่เป็นเหตุผลที่ฉันต้องการใช้ ng-repeat แทน ng-options) .

HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
   <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>

JS:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
        {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
     ]
}

Question 5

ความจริงที่ว่าเชิงมุมกำลังฉีดองค์ประกอบอ็อพชันว่างให้กับการเลือกคืออ็อบเจ็กต์โมเดลที่เชื่อมโยงกับอ็อบเจ็กต์โดยค่าเริ่มต้นจะมาพร้อมกับค่าว่างเมื่อเริ่มต้น

หากคุณต้องการเลือกตัวเลือกเริ่มต้นคุณสามารถตั้งค่าในขอบเขตในคอนโทรลเลอร์ได้

$scope.filterCondition.operator = "your value here";

ถ้าคุณต้องการตัวยึดตัวเลือกว่างสิ่งนี้ใช้ได้กับฉัน

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>

Question 6

ตามที่แนะนำคุณต้องใช้ ng-options และน่าเสียดายที่ฉันเชื่อว่าคุณต้องอ้างอิงองค์ประกอบอาร์เรย์เป็นค่าเริ่มต้น (เว้นแต่อาร์เรย์จะเป็นอาร์เรย์ของสตริง)

http://jsfiddle.net/FxM3B/3/

JavaScript:

function AppCtrl($scope) {


    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]

    $scope.filterCondition={
        operator: $scope.operators[0]
    }
}

HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>

Question 7

หากคุณใช้ md-select และ ng-repeat ing md-option จากวัสดุเชิงมุมคุณสามารถเพิ่มng-model-options="{trackBy: '$value.id'}"เถ้าแท็ก md-select ที่แสดงในปากกานี้ได้

รหัส:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
  <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
  <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>

ขยายข้อมูลโค้ด